<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="generator" content="pandoc">
    <meta name="description" content="">

    <title></title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="https://maxcdn.bootstrapcdn.com/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="https://mushiyo.github.io/pandoc-toc-sidebar/css/dashboard.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">code{white-space: pre;}</style>
    <style type="text/css">.sidebar ul{padding-left: 10px;}</style>
    <style type="text/css">
div.sourceCode { overflow-x: auto; }
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
  margin: 0; padding: 0; vertical-align: baseline; border: none; }
table.sourceCode { width: 100%; line-height: 100%; }
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
td.sourceCode { padding-left: 5px; }
code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
code > span.dt { color: #902000; } /* DataType */
code > span.dv { color: #40a070; } /* DecVal */
code > span.bn { color: #40a070; } /* BaseN */
code > span.fl { color: #40a070; } /* Float */
code > span.ch { color: #4070a0; } /* Char */
code > span.st { color: #4070a0; } /* String */
code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
code > span.ot { color: #007020; } /* Other */
code > span.al { color: #ff0000; font-weight: bold; } /* Alert */
code > span.fu { color: #06287e; } /* Function */
code > span.er { color: #ff0000; font-weight: bold; } /* Error */
code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
code > span.cn { color: #880000; } /* Constant */
code > span.sc { color: #4070a0; } /* SpecialChar */
code > span.vs { color: #4070a0; } /* VerbatimString */
code > span.ss { color: #bb6688; } /* SpecialString */
code > span.im { } /* Import */
code > span.va { color: #19177c; } /* Variable */
code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code > span.op { color: #666666; } /* Operator */
code > span.bu { } /* BuiltIn */
code > span.ex { } /* Extension */
code > span.pp { color: #bc7a00; } /* Preprocessor */
code > span.at { color: #7d9029; } /* Attribute */
code > span.do { color: #ba2121; font-style: italic; } /* Documentation */
code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
    </style>
  </head>

  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Node.js笔记</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="https://npm.taobao.org/mirrors/node/latest/docs/api/index.html">node.js文档</a></li>
            <li><a href="http://es6.ruanyifeng.com/">es6语法</a></li>
            <li><a href="https://docs.npmjs.com/">npm文档</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">more<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="https://code.visualstudio.com/">vsCode官网</a></li>
                <li><a href="http://www.cnblogs.com/mr-wid/archive/2013/05/09/3068229.html">21分钟学会mysql</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">参考</li>
                <li><a href="https://github.com/zhengwei1949">问题反馈</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div id="sidebar" class="col-sm-3 col-md-2 sidebar">
          <!--<ul class="nav nav-sidebar">
            <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
          </ul>-->
          <ul>
          <li><a href="#为什么要学习node.js">为什么要学习Node.js</a></li>
          <li><a href="#推荐编辑器">推荐编辑器</a><ul>
          <li><a href="#常用操作推荐">常用操作推荐</a></li>
          </ul></li>
          <li><a href="#课前预习">课前预习</a></li>
          <li><a href="#课程主线">课程主线</a></li>
          <li><a href="#day01">day01</a><ul>
          <li><a href="#课程主题">课程主题</a></li>
          <li><a href="#node.js基础---初识node.js-1557">01-Node.js基础 - 初识Node.js 15:57</a><ul>
          <li><a href="#问题">问题</a></li>
          <li><a href="#总结">总结</a></li>
          </ul></li>
          <li><a href="#node.js基础---终端基本使用-1403">02-Node.js基础 - 终端基本使用 14:03</a><ul>
          <li><a href="#总结-1">总结</a></li>
          </ul></li>
          <li><a href="#node.js基础---环境安装配置-2416不讲慎操作如果你电脑有尽量不要尝试否则会出问题">03-Node.js基础 - 环境安装配置 24:16(不讲、慎操作(如果你电脑有尽量不要尝试否则会出问题))</a><ul>
          <li><a href="#总结-2">总结</a></li>
          </ul></li>
          <li><a href="#node.js基础-代码执行顺序-1213">04-Node.js基础-代码执行顺序 12:13</a><ul>
          <li><a href="#前置问题">前置问题</a></li>
          <li><a href="#总结-3">总结</a></li>
          </ul></li>
          <li><a href="#node.js基础---全局成员概述-1512">05-Node.js基础 - 全局成员概述 15:12</a><ul>
          <li><a href="#前置问题-1">前置问题</a></li>
          <li><a href="#node.js特有的api">Node.js特有的api</a></li>
          </ul></li>
          <li><a href="#node.js基础-初识模块化-1330">06-Node.js基础-初识模块化 13:30</a></li>
          <li><a href="#node.js基础-模块成员导出详解-1545">07-Node.js基础-模块成员导出详解 15:45</a><ul>
          <li><a href="#注意">注意</a></li>
          </ul></li>
          <li><a href="#node.js基础-模块化细节补充">08-Node.js基础-模块化细节补充</a><ul>
          <li><a href="#补充">补充：</a></li>
          <li><a href="#require这里面的叫模块标识符">require(这里面的叫模块标识符)</a></li>
          </ul></li>
          <li><a href="#接下来要学习的是es6相关的语法作为一个中级前端一定要习惯喜欢上es6的语法">接下来要学习的是ES6相关的语法(作为一个中级前端，一定要习惯喜欢上es6的语法)</a></li>
          <li><a href="#node.js基础-es6-let和const使用规则-1330">09-Node.js基础-ES6-let和const使用规则-13:30</a><ul>
          <li><a href="#let相关知识点">let相关知识点</a></li>
          <li><a href="#const知识点">const知识点</a></li>
          </ul></li>
          <li><a href="#node.js基础-变量的解构赋值-1252">10-Node.js基础-变量的解构赋值-12:52</a><ul>
          <li><a href="#前置问题-2">前置问题</a></li>
          <li><a href="#什么是解构赋值">什么是解构赋值</a></li>
          </ul></li>
          <li><a href="#node.js基础-es6字符串相关扩展-1413">11-Node.js基础-ES6字符串相关扩展-14:13</a><ul>
          <li><a href="#对象解构赋值补充">对象解构赋值补充</a></li>
          <li><a href="#字符串相关扩展">字符串相关扩展</a></li>
          </ul></li>
          <li><a href="#node.js基础-es6-函数相关扩展-1338">12-Node.js基础-ES6-函数相关扩展 13:38</a></li>
          </ul></li>
          <li><a href="#day02">day02</a><ul>
          <li><a href="#注意-1">注意</a></li>
          <li><a href="#node.js基础-es6-箭头函数-1739">01-Node.js基础-ES6-箭头函数-17:39</a><ul>
          <li><a href="#上面的视频的补充">上面的视频的补充</a></li>
          <li><a href="#箭头函数">箭头函数</a></li>
          <li><a href="#箭头函数-1">箭头函数</a></li>
          </ul></li>
          <li><a href="#node.js基础-类与继承-1231">02-Node.js基础-类与继承-12:31</a><ul>
          <li><a href="#继承">继承</a></li>
          </ul></li>
          <li><a href="#练习">练习</a></li>
          <li><a href="#编码">编码</a><ul>
          <li><a href="#电脑只存存二进制数据">电脑只存存二进制数据</a></li>
          <li><a href="#node.js中与编码相关的api----buffer">node.js中与编码相关的api --&gt; Buffer</a></li>
          </ul></li>
          <li><a href="#node.js基础-异步编程概念分析-1125">03-Node.js基础-异步编程概念分析-11:25</a><ul>
          <li><a href="#感性的认识异步">感性的认识异步</a></li>
          <li><a href="#通过一个例子来理解js执行代码的流程不考虑预解析">通过一个例子来理解js执行代码的流程(不考虑预解析)</a></li>
          </ul></li>
          <li><a href="#node.js基础-查看文件状态-1405">04-Node.js基础-查看文件状态-14:05</a><ul>
          <li><a href="#补充同步的方式">补充:同步的方式</a></li>
          </ul></li>
          <li><a href="#node.js基础-读文件操作-928掌握">05-Node.js基础-读文件操作-9:28(掌握)</a></li>
          <li><a href="#node.js基础-写文件操作-827">06-Node.js基础-写文件操作-8:27</a><ul>
          <li><a href="#注意事项">注意事项</a></li>
          </ul></li>
          <li><a href="#node.js基础-文件的流式操作-1300">07-Node.js基础-文件的流式操作-13:00</a><ul>
          <li><a href="#使用fs.readfile不能读取超大文件">使用fs.readFile不能读取超大文件</a></li>
          <li><a href="#流式操作">流式操作</a></li>
          <li><a href="#如何理解">如何理解</a></li>
          <li><a href="#管道的方式">管道的方式</a></li>
          </ul></li>
          <li><a href="#node.js基础-初识包概念-536主要讲全局方式">08-Node.js基础-初识包概念-5:36(主要讲全局方式)</a><ul>
          <li><a href="#复习前面讲过的模块">复习前面讲过的模块</a></li>
          <li><a href="#复习gulp的用法">复习gulp的用法</a></li>
          <li><a href="#如何理解包">如何理解包</a></li>
          </ul></li>
          <li><a href="#node.js基础-npm基本使用-1122">09-Node.js基础-npm基本使用-11:22</a><ul>
          <li><a href="#常用npm命令">常用npm命令</a></li>
          </ul></li>
          <li><a href="#node.js基础-npm基本使用-1124主要讲本地模式">10-Node.js基础-npm基本使用-11:24(主要讲本地模式)</a></li>
          <li><a href="#node.js基础-npm基本使用-704讲--save和--save-dev的区别">11-Node.js基础-npm基本使用-7:04(讲--save和--save-dev的区别)</a></li>
          <li><a href="#node.js基础-修改npm镜像地址-1141">12-Node.js基础-修改npm镜像地址-11:41</a></li>
          <li><a href="#node.js基础-yarn基本使用-712">13-Node.js基础-yarn基本使用-7:12</a><ul>
          <li><a href="#补充一个命令rimraf超好用">补充一个命令rimraf(超好用)</a></li>
          </ul></li>
          <li><a href="#node.js基础-自定义包案例">14-Node.js基础-自定义包案例</a><ul>
          <li><a href="#包的规范">包的规范</a></li>
          <li><a href="#package.json字段分析">package.json字段分析</a></li>
          <li><a href="#综合案例">综合案例</a></li>
          </ul></li>
          </ul></li>
          <li><a href="#day03">day03</a><ul>
          <li><a href="#注意-2">注意</a></li>
          <li><a href="#node.js-web开发-初识服务器模型-456">01-Node.js-web开发-初识服务器模型-4:56</a></li>
          <li><a href="#node.js-web开发-初步实现服务器功能-857">02-Node.js-web开发-初步实现服务器功能-8:57</a><ul>
          <li><a href="#普通写法">普通写法</a></li>
          <li><a href="#链式写法">链式写法</a></li>
          <li><a href="#如何通俗的理解">如何通俗的理解</a></li>
          <li><a href="#问题-1">问题</a></li>
          </ul></li>
          <li><a href="#node.js开发-初步实现静态资源功能-1318">04-Node.js开发-初步实现静态资源功能-13:18</a><ul>
          <li><a href="#这样实现的问题">这样实现的问题</a></li>
          </ul></li>
          <li><a href="#node.js开发-优化静态资源功能-1401使用mime">05-Node.js开发-优化静态资源功能-14:01(使用mime)</a></li>
          <li><a href="#node.js开发-静态资源服务器功能模块封装-1401">06-Node.js开发-静态资源服务器功能模块封装-14:01</a><ul>
          <li><a href="#先思考一下我们如果是浏览器端怎么处理">先思考一下我们如果是浏览器端怎么处理?</a></li>
          </ul></li>
          <li><a href="#node.js开发-post参数处理-1327">08-Node.js开发-post参数处理-13：27</a><ul>
          <li><a href="#补充-post数据提交的形式的区别">补充 post数据提交的形式的区别</a></li>
          </ul></li>
          <li><a href="#node.js-web开发-登陆验证案例-1322">09-Node.js-web开发-登陆验证案例-13:22</a></li>
          <li><a href="#node.js-web开发-初步实现动态网站">10-Node.js-web开发-初步实现动态网站</a><ul>
          <li><a href="#动态网站的本质">动态网站的本质</a></li>
          </ul></li>
          <li><a href="#node.js-web开发-后台模板引擎基本使用-1259">11-Node.js-web开发-后台模板引擎基本使用-12:59</a></li>
          <li><a href="#node.js-web开发-使用模板引擎查询成绩案例">12-Node.js-web开发-使用模板引擎查询成绩案例</a></li>
          <li><a href="#node.js-web开发-express-初识web框架-719">13-Node.js-web开发-Express-初识web框架-7:19</a></li>
          <li><a href="#node.js-web开发-express-初步实现服务器功能-900">14-Node.js-web开发-Express-初步实现服务器功能-9:00</a></li>
          <li><a href="#node.js-web开发-express-托管静态资源-1234">15-Node.js-web开发-Express-托管静态资源-12:34</a></li>
          <li><a href="#node.js-web开发-express-路由处理-1120">16-Node.js-web开发-Express-路由处理-11:20</a></li>
          </ul></li>
          <li><a href="#参考资料">参考资料</a></li>
          </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        
<h1 id="为什么要学习node.js">为什么要学习Node.js</h1>
<ul>
<li>学会es6语法</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//下面这段代码是什么含义</span>
<span class="kw">const</span> foo <span class="op">=</span> (<span class="op">{</span><span class="dt">hello</span><span class="op">:{</span><span class="dt">world</span><span class="op">:</span>bar<span class="op">}}</span>)<span class="op">=&gt;</span>(<span class="op">{</span>bar<span class="op">}</span>)<span class="op">;</span></code></pre></div>
<ul>
<li>在以后使用vue.js,angular.js,react.js，包括webpack,gulp之类的构建工具的时候，能够更好的看懂里面的代码和参数配置项</li>
<li>了解后端在做什么(我们在课程的后半部分会用前后端混写+前后端分离两种方式写一个小的展示型网站)</li>
<li>在没有后端帮助的情况下自己给自己写测试接口(有些小一点的公司如果人数不够有可能接口需要自己来模拟)</li>
<li>为简历加分</li>
</ul>
<h1 id="推荐编辑器">推荐编辑器</h1>
<ul>
<li>vsCode(适合电脑内存小)
<ul>
<li>开源，来自微软公司</li>
<li>全平台支持(linux,mac,windows)</li>
<li>便于调试代码</li>
<li>代码出错了可以即时看到错误提示</li>
<li>安装插件超级方便(开箱即用)</li>
<li>默认中文，无需汉化破解</li>
</ul></li>
<li>webstorm(适合电脑内存大)</li>
<li>https://github.com/zhengwei1949/myblog/issues/60</li>
</ul>
<h2 id="常用操作推荐">常用操作推荐</h2>
<ul>
<li>分屏(左侧老师代码，右侧自己的代码对比着练习)</li>
</ul>
<h1 id="课前预习">课前预习</h1>
<ul>
<li>《Node.js前置知识.doc》 &lt;-- 晚上的时候可以看一看</li>
</ul>
<h1 id="课程主线">课程主线</h1>
<ul>
<li>Node.js基础知识、模块化、es6 **</li>
<li>文件操作、npm与包 **</li>
<li>开发网站(主要为了了解原理，以后不会这样写代码的) ****</li>
<li>express框架 + mysql数据库(重、难点) ****</li>
</ul>
<h1 id="day01">day01</h1>
<h2 id="课程主题">课程主题</h2>
<ul>
<li>Node.js基础</li>
<li>Node.js模块化相关</li>
<li>ES6相关</li>
</ul>
<h2 id="node.js基础---初识node.js-1557">01-Node.js基础 - 初识Node.js 15:57</h2>
<h3 id="问题">问题</h3>
<ol style="list-style-type: decimal">
<li>Node.js到底是一个什么东西?</li>
<li>Nodejs主要是用来干什么的?</li>
</ol>
<h3 id="总结">总结</h3>
<ol style="list-style-type: decimal">
<li>Node.js如何理解 为什么电影格式的文件可以播放 --&gt; 播放器引擎 --&gt; 只要有js引擎的东西就可以执行js文件 --&gt; 浏览器是常见的js执行环境 --&gt; Node.js也一个js执行环境</li>
<li>Node.js应用(课程中主要涉及到)
<ul>
<li>做网站、写api接口</li>
<li>命令行工具(比如gulp,webpack等)</li>
</ul></li>
</ol>
<h2 id="node.js基础---终端基本使用-1403">02-Node.js基础 - 终端基本使用 14:03</h2>
<h3 id="总结-1">总结</h3>
<ol style="list-style-type: decimal">
<li>打开应用(不用记，这块用得不多)
<ul>
<li>notepad 记事本</li>
<li>mspaint 画图</li>
<li>calc 计算器</li>
<li>write 写字板</li>
<li>sysdm.cpl 打开环境变量设置窗口</li>
</ul></li>
<li>常用命令(不用记，这块用得不多)
<ul>
<li>md或mkdir 创建目录(推荐掌握)</li>
<li>rmdir(rd) 删除目录、目录内必须没有文档</li>
<li>echo on a.txt 创建空文件</li>
<li>del 删除文件</li>
<li>rm 文件名 删除文件</li>
<li>cat 文件名 查看文件内容</li>
<li>cat &gt; 文件名 向文件写内容</li>
</ul></li>
<li>注意</li>
</ol>
<ul>
<li>这几个名词，指的是同一个意思：命令行、DOS、控制台、终端、terminal</li>
<li>终端如果嫌字太小，可以调节(把鼠标放到状态栏 --&gt; 右键 --&gt; 属性)</li>
</ul>
<ol start="4" style="list-style-type: decimal">
<li>常用的命令(视频没有，我加的)
<ul>
<li>换盘符: D:、C:</li>
<li>列出当前目录下的文件及文件夹: dir</li>
<li>退回上一级目录：cd .. 或者 cd ..<br />
</li>
<li>保持原样: cd .</li>
<li>退回盘符根目录:cd<br />
</li>
<li>退出命令行:exit</li>
<li>清屏:cls</li>
<li>ipconfig /all</li>
</ul></li>
</ol>
<h2 id="node.js基础---环境安装配置-2416不讲慎操作如果你电脑有尽量不要尝试否则会出问题">03-Node.js基础 - 环境安装配置 24:16(不讲、慎操作(如果你电脑有尽量不要尝试否则会出问题))</h2>
<h3 id="总结-2">总结</h3>
<ol style="list-style-type: decimal">
<li>普通安装方式</li>
<li>nvm(不推荐，在win10有的win7电脑上测试过有bug 参考https://cnodejs.org/topic/580ad5b605dbe08f50be31f7)</li>
<li>推荐安装稳定版即可，版本太低必须要升级，6.1.10以上即可,否则对es6支持程度太差</li>
</ol>
<h2 id="node.js基础-代码执行顺序-1213">04-Node.js基础-代码执行顺序 12:13</h2>
<h3 id="前置问题">前置问题</h3>
<ul>
<li>如何在浏览器端执行js代码?</li>
</ul>
<h3 id="总结-3">总结</h3>
<ul>
<li>repl方式</li>
<li>执行文件的方式
<ol style="list-style-type: decimal">
<li>创建一个js文件(不要用中文、文件名不要起得太特殊)</li>
<li>按住shift键+在当前文件夹右键打开命令行工具</li>
<li>输入<code>node 文件名.js</code></li>
</ol></li>
</ul>
<h2 id="node.js基础---全局成员概述-1512">05-Node.js基础 - 全局成员概述 15:12</h2>
<h3 id="前置问题-1">前置问题</h3>
<ul>
<li>js由哪三部分组成?</li>
</ul>
<h3 id="node.js特有的api">Node.js特有的api</h3>
<ul>
<li>__dirname(掌握),__filename(了解即可)</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//包含文件名的全路径</span>
<span class="va">console</span>.<span class="at">log</span>(__filename)<span class="op">;</span>
<span class="co">//当前文件的路径</span>
<span class="va">console</span>.<span class="at">log</span>(__dirname)<span class="op">;</span></code></pre></div>
<ul>
<li>global全局对象</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//global相当于浏览器端的window</span>
<span class="va">global</span>.<span class="va">console</span>.<span class="at">log</span>(<span class="dv">123</span>)<span class="op">;</span>
<span class="va">global</span>.<span class="at">setTimeout</span>(<span class="kw">function</span>()<span class="op">{</span>
    <span class="va">console</span>.<span class="at">log</span>(<span class="dv">666</span>)<span class="op">;</span>
<span class="op">},</span><span class="dv">1000</span>)<span class="op">;</span></code></pre></div>
<ul>
<li>process.argv(了解)</li>
</ul>
<p>通过做一个命令行加法计算器的demo(体会一下process.argv的作用)</p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//执行方式: node 文件名.js 1 2 3 和prompt进行类比记忆</span>
<span class="co">//argv是一个数组，默认情况下，前两项分别是：Node.js环境的路径、当前执行的js文件的全部路径</span>
<span class="va">console</span>.<span class="at">log</span>(<span class="va">process</span>.<span class="at">argv</span>)<span class="op">;</span></code></pre></div>
<ul>
<li>process.env(补充)
<ul>
<li>经常会在webpack之类的配置代码里见到如何代码：</li>
<li>安装cross-env模块</li>
<li>配置npm的scripts</li>
<li>执行<code>npm run start</code></li>
</ul></li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//作用：我们写代码分发布阶段和开发阶段，如果是开发阶段，我们可能需要各种调试打印一些东西，但是在发布阶段就不需要</span>
<span class="va">process</span>.<span class="va">env</span>.<span class="at">NODE_ENV</span> <span class="op">===</span> <span class="st">&#39;production&#39;</span>

<span class="cf">if</span>(<span class="op">!</span><span class="va">process</span>.<span class="va">env</span>.<span class="at">NODE_ENV</span> <span class="op">===</span> <span class="st">&#39;production&#39;</span>)<span class="op">{</span>
    <span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;xxx&#39;</span>)<span class="op">;</span>
<span class="op">}</span></code></pre></div>
<h2 id="node.js基础-初识模块化-1330">06-Node.js基础-初识模块化 13:30</h2>
<p>掌握模块化只需要掌握三大块：如何创建一个模块+如何把当前模块的属性或方法导出（暴露）出去+如何引第三方模块(可以复习一下require.js代码)</p>
<ol style="list-style-type: decimal">
<li>如何创建模块：在Node.js中一个文件就是一个模块</li>
<li>如何把当前模块的属性或方法导出（暴露）</li>
</ol>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//导出</span>
<span class="kw">var</span> sum <span class="op">=</span> <span class="kw">function</span>(a<span class="op">,</span>b)<span class="op">{</span>
    <span class="cf">return</span> <span class="at">parseInt</span>(a) <span class="op">+</span> <span class="at">parseInt</span>(b)<span class="op">;</span>
<span class="op">}</span>

<span class="va">exports</span>.<span class="at">sum</span> <span class="op">=</span> sum<span class="op">;</span>

<span class="co">//或者</span>
<span class="va">module</span>.<span class="va">exports</span>.<span class="at">sum</span> <span class="op">=</span> sum<span class="op">;</span></code></pre></div>
<ol start="3" style="list-style-type: decimal">
<li>如何引第三方模块</li>
</ol>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//导入</span>
<span class="kw">var</span> calc <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;./calc.js&#39;</span>)<span class="op">;</span></code></pre></div>
<h2 id="node.js基础-模块成员导出详解-1545">07-Node.js基础-模块成员导出详解 15:45</h2>
<ul>
<li>本质上用的是module.exports</li>
<li>快捷方式：exports</li>
<li><p>类比：和对象的引用很像</p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> obj <span class="op">=</span> <span class="op">{</span><span class="dt">name</span><span class="op">:</span><span class="st">&#39;itcast&#39;</span><span class="op">};</span><span class="co">//类比module.exports</span>
<span class="kw">var</span> obj1 <span class="op">=</span> obj<span class="op">;</span><span class="co">//obj1类比exports</span></code></pre></div></li>
<li>以module.exports为准</li>
<li>用exports的时候记得一定不要直接让exports等于谁，这样会改变地址指向</li>
<li><p>永远只用module.exports就永远不会出错</p></li>
</ul>
<h3 id="注意">注意</h3>
<p>以exports导出的模块的话，导出什么就能用什么，没导出的就不能用</p>
<h2 id="node.js基础-模块化细节补充">08-Node.js基础-模块化细节补充</h2>
<ul>
<li>利用global实现文件(在Node.js中一个文件就是一个模块)间共享数据 --&gt; 不推荐这样玩，不好，容易造成全局变量污染和全局global挂太多变量，了解即可</li>
<li>js扩展名后缀可以省略的(尽量不要省，性能更好一些)</li>
<li>模块文件有三种类型：js代码文件&gt;json代码文件&gt;node代码文件(c++编译成二进制的代码)</li>
<li>模块分类：(类比jquery的内置插件和第三方插件)
<ul>
<li>自定义模块</li>
<li>内置模块:fs,path,http...</li>
</ul></li>
</ul>
<h3 id="补充">补充：</h3>
<h4 id="node架构理解">node架构理解</h4>
<ul>
<li>和jquery很像，核心(core) + 扩展</li>
<li>目的：为了最好的性能减少冗余代码</li>
</ul>
<h4 id="如何使用path内置模块">如何使用path内置模块</h4>
<ul>
<li>为什么要使用path.join 我们如果想拼一个路径的话，如果是windows电脑，中间用，如果是mac,则是用/隔开，所以在拼路径的时候，没办法实现同一套代码 在mac,windows共用，所以，可以考虑使用path.join</li>
</ul>
<p><img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-28/29628469.jpg" /> <img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-28/31222427.jpg" /></p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="va">console</span>.<span class="at">log</span>(<span class="va">path</span>.<span class="at">join</span>(<span class="st">&#39;a&#39;</span><span class="op">,</span><span class="st">&#39;b&#39;</span>))<span class="op">;</span></code></pre></div>
<ul>
<li>path.extname</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="va">console</span>.<span class="at">log</span>(<span class="va">path</span>.<span class="at">extname</span>(<span class="st">&#39;a.js&#39;</span>))<span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(<span class="va">path</span>.<span class="at">extname</span>(<span class="st">&#39;a.html&#39;</span>))<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> path <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;path&#39;</span>)<span class="op">;</span></code></pre></div>
<ul>
<li>path.resolve
<ul>
<li>返回值是一个绝对路径</li>
<li>path.join(__dirname,'a.js')和path.resolve(__dirname,'a.js')是一个意思</li>
</ul></li>
</ul>
<h3 id="require这里面的叫模块标识符">require(这里面的叫模块标识符)</h3>
<ul>
<li>如果是绝对路径,并且带扩展名(.js,.json,.node) --&gt; 去找对应的文件</li>
<li>如果是绝对路径，不带扩展名 --&gt; .js &gt; .json &gt; .node</li>
<li>如果是相对路径,,并且带扩展名(.js,.json,.node) --&gt; 去找对应的文件</li>
<li>如果是相对路径，不带扩展名 --&gt; .js &gt; .json &gt; .node</li>
<li>如果是require('a')这种形式的 --&gt; 内置模块，比如fs、path、http之类的</li>
</ul>
<h2 id="接下来要学习的是es6相关的语法作为一个中级前端一定要习惯喜欢上es6的语法">接下来要学习的是ES6相关的语法(作为一个中级前端，一定要习惯喜欢上es6的语法)</h2>
<ul>
<li>学习技巧：
<ul>
<li><a href="http://babeljs.io/repl/">在线playground</a></li>
</ul></li>
<li>编辑器配置
<ul>
<li>webstorm --&gt; 如何设置防止报错(http://www.jianshu.com/p/b4390919a5b5)</li>
</ul></li>
</ul>
<h2 id="node.js基础-es6-let和const使用规则-1330">09-Node.js基础-ES6-let和const使用规则-13:30</h2>
<h3 id="let相关知识点">let相关知识点</h3>
<ul>
<li><strong>let不存在变量预解析</strong></li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="va">console</span>.<span class="at">log</span>(flag)<span class="op">;</span><span class="co">//存在预解析，代码不会报错</span>
<span class="kw">var</span> flag <span class="op">=</span> <span class="dv">123</span><span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="va">console</span>.<span class="at">log</span>(flag)<span class="op">;</span><span class="co">//不存在预解析，代码会报错</span>
<span class="kw">let</span> flag <span class="op">=</span> <span class="dv">456</span><span class="op">;</span></code></pre></div>
<ul>
<li><strong>let声明的变量不允许重复声明(可以重复赋值)</strong></li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">let</span> flag <span class="op">=</span> <span class="dv">123</span><span class="op">;</span>
<span class="kw">let</span> flag <span class="op">=</span> <span class="dv">456</span><span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(flag)<span class="op">;</span><span class="co">//会报错</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="cf">if</span>(<span class="kw">true</span>)<span class="op">{</span>
    <span class="kw">var</span> flag <span class="op">=</span> <span class="dv">123</span><span class="op">;</span>
<span class="op">}</span>
<span class="va">console</span>.<span class="at">log</span>(flag)<span class="op">;</span><span class="co">//123</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="cf">if</span>(<span class="kw">false</span>)<span class="op">{</span>
    <span class="kw">var</span> flag <span class="op">=</span> <span class="dv">123</span><span class="op">;</span>
<span class="op">}</span>
<span class="va">console</span>.<span class="at">log</span>(flag)<span class="op">;</span><span class="co">//undefined,因为存在变量预解析</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="cf">if</span>(<span class="kw">true</span>)<span class="op">{</span>
    <span class="kw">let</span> flag <span class="op">=</span> <span class="dv">123</span><span class="op">;</span>
<span class="op">}</span>
<span class="va">console</span>.<span class="at">log</span>(flag)<span class="op">;</span><span class="co">//会报错,因为let会导致花括号形成局部作用域</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="op">{</span>
    <span class="kw">var</span> a <span class="op">=</span> <span class="dv">100</span><span class="op">;</span>
    <span class="kw">let</span> flag <span class="op">=</span> <span class="dv">2</span><span class="op">;</span>
<span class="op">}</span>
<span class="va">console</span>.<span class="at">log</span>(a)<span class="op">;</span><span class="co">//100</span>
<span class="va">console</span>.<span class="at">log</span>(flag)<span class="op">;</span><span class="co">//报错</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="cf">for</span>(<span class="kw">var</span> i<span class="op">=</span><span class="dv">0</span><span class="op">;</span>i<span class="op">&lt;</span><span class="dv">3</span><span class="op">;</span>i<span class="op">++</span>)<span class="op">{</span>
    <span class="va">console</span>.<span class="at">log</span>(i)<span class="op">;</span>
<span class="op">}</span>
<span class="va">console</span>.<span class="at">log</span>(i)<span class="op">;</span><span class="co">//3</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//for循环括号中声明的变量只能在循环体中使用</span>
<span class="cf">for</span>(<span class="kw">let</span> i<span class="op">=</span><span class="dv">0</span><span class="op">;</span>i<span class="op">&lt;</span><span class="dv">3</span><span class="op">;</span>i<span class="op">++</span>)<span class="op">{</span>
    <span class="va">console</span>.<span class="at">log</span>(i)<span class="op">;</span>
<span class="op">}</span>
<span class="va">console</span>.<span class="at">log</span>(i)<span class="op">;</span><span class="co">//报错</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//在块级作用域中，变量只能先声明再使用</span>
<span class="cf">if</span>(<span class="kw">true</span>)<span class="op">{</span>
    <span class="va">console</span>.<span class="at">log</span>(flag)<span class="op">;</span>
    <span class="kw">let</span> flag <span class="op">=</span> <span class="dv">123</span><span class="op">;</span>
<span class="op">}</span></code></pre></div>
<h3 id="const知识点">const知识点</h3>
<ul>
<li><strong>const不能重复声明、也不能重复赋值，其他的和let一样</strong></li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> n <span class="op">=</span> <span class="dv">1</span><span class="op">;</span>
n <span class="op">=</span> <span class="dv">2</span><span class="op">;</span></code></pre></div>
<h4 id="const应用">const应用</h4>
<ul>
<li>引入其他模块的时候，一般用const</li>
<li>常量用const,比如Math.PI</li>
<li>由于const最严格，所以默认全用const，只有当值会变化或者复合数据类型的地址会变化的时候，才考虑用let</li>
</ul>
<h2 id="node.js基础-变量的解构赋值-1252">10-Node.js基础-变量的解构赋值-12:52</h2>
<h3 id="前置问题-2">前置问题</h3>
<ul>
<li>如何把数组中的各项的值赋值给其他变量</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">let</span> arr <span class="op">=</span> [<span class="dv">2</span><span class="op">,</span><span class="dv">3</span><span class="op">,</span><span class="dv">4</span>]<span class="op">;</span>
<span class="kw">let</span> a <span class="op">=</span> arr[<span class="dv">0</span>]<span class="op">;</span>
<span class="kw">let</span> b <span class="op">=</span> arr[<span class="dv">1</span>]<span class="op">;</span>
<span class="kw">let</span> c <span class="op">=</span> arr[<span class="dv">2</span>]<span class="op">;</span></code></pre></div>
<ul>
<li>如何把对象中各项的值赋值给其他变量</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">let</span> obj <span class="op">=</span> <span class="op">{</span><span class="dt">name</span><span class="op">:</span><span class="st">&#39;itcast&#39;</span><span class="op">,</span><span class="dt">subject</span><span class="op">:</span><span class="st">&#39;frontend&#39;</span><span class="op">};</span>
<span class="kw">let</span> name <span class="op">=</span> obj[<span class="st">&#39;name&#39;</span>]<span class="op">;</span>
<span class="kw">let</span> subject <span class="op">=</span> obj[<span class="st">&#39;frontend&#39;</span>]<span class="op">;</span></code></pre></div>
<h3 id="什么是解构赋值">什么是解构赋值</h3>
<p>解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁，同时还比传统的属性访问方法更为清晰。</p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//数组解构赋值</span>
<span class="kw">let</span> [a<span class="op">,</span>b<span class="op">,</span>c] <span class="op">=</span> [<span class="dv">1</span><span class="op">,</span><span class="dv">2</span><span class="op">,</span><span class="dv">3</span>]<span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(a<span class="op">,</span>b<span class="op">,</span>c)<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//数组解构赋值</span>
<span class="kw">let</span> [a<span class="op">=</span><span class="dv">123</span><span class="op">,</span>b<span class="op">,</span>c] <span class="op">=</span> [<span class="op">,</span><span class="dv">2</span><span class="op">,</span>]<span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(a<span class="op">,</span>b<span class="op">,</span>c)<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//对象解构赋值(按需加载)</span>
<span class="kw">let</span> <span class="op">{</span>bar<span class="op">,</span>foo<span class="op">}</span> <span class="op">=</span> <span class="op">{</span><span class="dt">bar</span><span class="op">:</span><span class="st">&quot;itcast&quot;</span><span class="op">,</span><span class="dt">foo</span><span class="op">:</span><span class="st">&quot;hi&quot;</span><span class="op">};</span>
<span class="va">console</span>.<span class="at">log</span>(foo<span class="op">,</span>bar)<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//对象解构赋值</span>
<span class="kw">let</span> <span class="op">{</span>foo<span class="op">,</span>bar<span class="op">}</span> <span class="op">=</span> <span class="op">{</span><span class="dt">bar</span><span class="op">:</span><span class="st">&quot;itcast&quot;</span><span class="op">,</span><span class="dt">foo</span><span class="op">:</span><span class="st">&quot;hi&quot;</span><span class="op">};</span>
<span class="va">console</span>.<span class="at">log</span>(foo<span class="op">,</span>bar)<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//对象解构赋值</span>
<span class="co">//abc是别名，如果有了别名，那么原来的名字就无效了</span>
<span class="kw">let</span> <span class="op">{</span><span class="dt">foo</span><span class="op">:</span>abc<span class="op">,</span>bar<span class="op">}</span> <span class="op">=</span> <span class="op">{</span><span class="dt">bar</span><span class="op">:</span><span class="st">&quot;itcast&quot;</span><span class="op">,</span><span class="dt">foo</span><span class="op">:</span><span class="st">&quot;hi&quot;</span><span class="op">};</span>
<span class="va">console</span>.<span class="at">log</span>(foo<span class="op">,</span>bar)<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//对象解构赋值</span>
<span class="kw">let</span> <span class="op">{</span>cos<span class="op">,</span>sin<span class="op">,</span>random<span class="op">}</span> <span class="op">=</span> Math<span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(<span class="kw">typeof</span> cos)<span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(<span class="kw">typeof</span> sin)<span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(<span class="kw">typeof</span> random)<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//字符串解构赋值(了解即可)</span>
<span class="kw">let</span> [a<span class="op">,</span>b<span class="op">,</span>c<span class="op">,</span>d<span class="op">,</span>e] <span class="op">=</span> <span class="st">&quot;hello&quot;</span><span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(a<span class="op">,</span>b<span class="op">,</span>c<span class="op">,</span>d<span class="op">,</span>e)<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">let</span> <span class="op">{</span>length<span class="op">}</span> <span class="op">=</span> <span class="st">&quot;hi&quot;</span><span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(length)<span class="op">;</span></code></pre></div>
<h2 id="node.js基础-es6字符串相关扩展-1413">11-Node.js基础-ES6字符串相关扩展-14:13</h2>
<h3 id="对象解构赋值补充">对象解构赋值补充</h3>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//对象解构赋值 - 默认值</span>
<span class="kw">let</span> <span class="op">{</span>bar<span class="op">=</span><span class="st">&#39;hello&#39;</span><span class="op">,</span>foo<span class="op">}</span> <span class="op">=</span> <span class="op">{</span><span class="dt">bar</span><span class="op">:</span><span class="st">&quot;itcast&quot;</span><span class="op">,</span><span class="dt">foo</span><span class="op">:</span><span class="st">&quot;hi&quot;</span><span class="op">};</span>
<span class="va">console</span>.<span class="at">log</span>(foo<span class="op">,</span>bar)<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//对象解构赋值 - 默认值</span>
<span class="kw">let</span> <span class="op">{</span>bar<span class="op">=</span><span class="st">&#39;hello&#39;</span><span class="op">,</span>foo<span class="op">}</span> <span class="op">=</span> <span class="op">{</span><span class="dt">foo</span><span class="op">:</span><span class="st">&quot;hi&quot;</span><span class="op">};</span>
<span class="va">console</span>.<span class="at">log</span>(foo<span class="op">,</span>bar)<span class="op">;</span></code></pre></div>
<h3 id="字符串相关扩展">字符串相关扩展</h3>
<ul>
<li>includes</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;hello world&#39;</span>.<span class="at">includes</span>(<span class="st">&#39;world&#39;</span><span class="op">,</span><span class="dv">6</span>))<span class="op">;</span></code></pre></div>
<ul>
<li>startsWith</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">let</span> url <span class="op">=</span> <span class="st">&#39;admin/index.php&#39;</span><span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(<span class="va">url</span>.<span class="at">startsWith</span>(<span class="st">&#39;admin&#39;</span>))<span class="op">;</span></code></pre></div>
<ul>
<li>endsWith</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">let</span> url <span class="op">=</span> <span class="st">&#39;admin/index.php&#39;</span><span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(<span class="va">url</span>.<span class="at">endsWith</span>(<span class="st">&#39;php&#39;</span>))<span class="op">;</span></code></pre></div>
<ul>
<li>模板字符串</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">let</span> obj <span class="op">=</span> <span class="op">{</span>
    <span class="dt">username</span><span class="op">:</span><span class="st">&#39;lisi&#39;</span><span class="op">,</span>
    <span class="dt">age</span><span class="op">:</span><span class="st">&#39;12&#39;</span><span class="op">,</span>
    <span class="dt">gender</span><span class="op">:</span><span class="st">&#39;male&#39;</span>
<span class="op">};</span>

<span class="kw">let</span> fn <span class="op">=</span> <span class="kw">function</span>(info)<span class="op">{</span>
    <span class="cf">return</span> info <span class="op">+</span> <span class="st">&#39;666&#39;</span><span class="op">;</span>
<span class="op">}</span>

<span class="kw">let</span> tpl <span class="op">=</span> 
<span class="vs">`</span>
<span class="vs">    &lt;div&gt;</span>
<span class="vs">        &lt;p&gt;&lt;span&gt;</span><span class="sc">${</span><span class="va">obj</span>.<span class="at">username</span><span class="sc">}</span><span class="vs">&lt;/span&gt;&lt;/p&gt;</span>
<span class="vs">        &lt;p&gt;&lt;span&gt;</span><span class="sc">${</span><span class="va">obj</span>.<span class="at">age</span><span class="sc">}</span><span class="vs">&lt;/span&gt;&lt;/p&gt;</span>
<span class="vs">        &lt;p&gt;&lt;span&gt;</span><span class="sc">${</span><span class="va">obj</span>.<span class="at">gender</span><span class="sc">}</span><span class="vs">&lt;/span&gt;&lt;/p&gt;</span>
<span class="vs">        &lt;p&gt;&lt;span&gt;</span><span class="sc">${</span><span class="at">fn</span>(<span class="st">&#39;nihao&#39;</span>)<span class="sc">}</span><span class="vs">&lt;/span&gt;&lt;/p&gt;</span>
<span class="vs">    &lt;/div&gt;</span>
<span class="vs">`</span>

<span class="va">console</span>.<span class="at">log</span>(tpl)<span class="op">;</span></code></pre></div>
<h2 id="node.js基础-es6-函数相关扩展-1338">12-Node.js基础-ES6-函数相关扩展 13:38</h2>
<ul>
<li>参数默认值</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//之前的写法</span>
<span class="kw">function</span> <span class="at">foo</span>(param)<span class="op">{</span>
    <span class="kw">let</span> p <span class="op">=</span> param <span class="op">||</span> <span class="st">&#39;hello&#39;</span><span class="op">;</span>
    <span class="va">console</span>.<span class="at">log</span>(p)<span class="op">;</span>
<span class="op">}</span>

<span class="at">foo</span>()<span class="op">;</span>
<span class="at">foo</span>(<span class="st">&#39;hi&#39;</span>)<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//ES6的写法</span>
<span class="kw">function</span> <span class="at">foo</span>(param <span class="op">=</span> <span class="st">&#39;nihao&#39;</span>)<span class="op">{</span>
    <span class="va">console</span>.<span class="at">log</span>(param)<span class="op">;</span>
<span class="op">}</span>

<span class="at">foo</span>()<span class="op">;</span>
<span class="at">foo</span>(<span class="st">&#39;hi&#39;</span>)<span class="op">;</span></code></pre></div>
<ul>
<li>参数解构赋值</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//这块比较难理解：前面的{}意思是要传入的是一个对象，如果不传会报错，中间的张三、13是默认值，后面的意思是如果不传，则默认值是{}</span>
<span class="kw">function</span> <span class="at">foo</span>(<span class="op">{</span>uname<span class="op">=</span><span class="st">&#39;张三&#39;</span><span class="op">,</span>age<span class="op">=</span><span class="dv">13</span><span class="op">}={}</span>)<span class="op">{</span>
    <span class="va">console</span>.<span class="at">log</span>(uname<span class="op">,</span>age)<span class="op">;</span>
<span class="op">}</span>

<span class="at">foo</span>(<span class="op">{</span><span class="dt">uname</span><span class="op">:</span><span class="st">&#39;zhangsan&#39;</span><span class="op">}</span>)<span class="op">;</span></code></pre></div>
<ul>
<li>rest参数(剩余参数)</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">foo</span>(a<span class="op">,</span>...<span class="at">param</span>)<span class="op">{</span>
    <span class="va">console</span>.<span class="at">log</span>(a<span class="op">,</span>param)<span class="op">;</span>
<span class="op">}</span>

<span class="at">foo</span>(<span class="dv">1</span><span class="op">,</span><span class="dv">2</span><span class="op">,</span><span class="dv">3</span><span class="op">,</span><span class="dv">5</span><span class="op">,</span><span class="dv">6</span>)<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">foo</span>(a<span class="op">,</span>b<span class="op">,</span>...<span class="at">param</span>)<span class="op">{</span>
    <span class="va">console</span>.<span class="at">log</span>(a<span class="op">,</span>b<span class="op">,</span>param)<span class="op">;</span>
<span class="op">}</span>

<span class="at">foo</span>(<span class="dv">1</span><span class="op">,</span><span class="dv">2</span><span class="op">,</span><span class="dv">3</span><span class="op">,</span><span class="dv">5</span><span class="op">,</span><span class="dv">6</span>)<span class="op">;</span></code></pre></div>
<ul>
<li>...扩展运算符</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">foo</span>(a<span class="op">,</span>b<span class="op">,</span>c<span class="op">,</span>d<span class="op">,</span>e)<span class="op">{</span>
    <span class="va">console</span>.<span class="at">log</span>(a<span class="op">+</span>b<span class="op">+</span>c<span class="op">+</span>d)<span class="op">;</span>
<span class="op">}</span>

<span class="at">foo</span>(<span class="dv">1</span><span class="op">,</span><span class="dv">2</span><span class="op">,</span><span class="dv">3</span><span class="op">,</span><span class="dv">4</span><span class="op">,</span><span class="dv">5</span><span class="op">,</span><span class="dv">6</span>)</code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">foo</span>(a<span class="op">,</span>b<span class="op">,</span>c<span class="op">,</span>d<span class="op">,</span>e)<span class="op">{</span>
    <span class="va">console</span>.<span class="at">log</span>(a<span class="op">+</span>b<span class="op">+</span>c<span class="op">+</span>d)<span class="op">;</span>
<span class="op">}</span>
<span class="kw">let</span> arr <span class="op">=</span> [<span class="dv">1</span><span class="op">,</span><span class="dv">2</span><span class="op">,</span><span class="dv">3</span><span class="op">,</span><span class="dv">4</span><span class="op">,</span><span class="dv">5</span>]<span class="op">;</span>
<span class="va">foo</span>.<span class="at">apply</span>(<span class="kw">null</span><span class="op">,</span>arr)<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">foo</span>(a<span class="op">,</span>b<span class="op">,</span>c<span class="op">,</span>d<span class="op">,</span>e)<span class="op">{</span>
    <span class="va">console</span>.<span class="at">log</span>(a<span class="op">+</span>b<span class="op">+</span>c<span class="op">+</span>d)<span class="op">;</span>
<span class="op">}</span>
<span class="kw">let</span> arr <span class="op">=</span> [<span class="dv">1</span><span class="op">,</span><span class="dv">2</span><span class="op">,</span><span class="dv">3</span><span class="op">,</span><span class="dv">4</span><span class="op">,</span><span class="dv">5</span>]<span class="op">;</span>
<span class="at">foo</span>(...<span class="at">arr</span>)<span class="op">;</span></code></pre></div>
<h1 id="day02">day02</h1>
<h2 id="注意-1">注意</h2>
<ul>
<li>今天前半天的课程是为了后面的课程铺垫的，特点是知识点比较零碎，可能在学的时候不知道是为了干嘛的，这块大家了解一下不用觉得茫然 ---&gt; 解释一下为什么需要学习(我们需要从后端返回一个页面内容，那肯定要把内容进行读取，所以涉及到了文件的读写操作)</li>
</ul>
<h2 id="node.js基础-es6-箭头函数-1739">01-Node.js基础-ES6-箭头函数-17:39</h2>
<h3 id="上面的视频的补充">上面的视频的补充</h3>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">let</span> arr1 <span class="op">=</span> [<span class="dv">1</span><span class="op">,</span><span class="dv">2</span><span class="op">,</span><span class="dv">3</span>]<span class="op">;</span>
<span class="kw">let</span> arr2 <span class="op">=</span> [<span class="dv">4</span><span class="op">,</span><span class="dv">5</span><span class="op">,</span><span class="dv">6</span>]<span class="op">;</span>
<span class="kw">let</span> arr3 <span class="op">=</span> [...<span class="at">arr1</span><span class="op">,</span>...<span class="at">arr2</span>]<span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(arr3)<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> arr <span class="op">=</span> [<span class="dv">2</span><span class="op">,</span><span class="dv">3</span><span class="op">,</span><span class="dv">4</span>]<span class="op">;</span>
<span class="kw">const</span> arr1 <span class="op">=</span> [].<span class="at">concat</span>(arr)<span class="op">;</span>
<span class="co">//现在可以这样写：</span>
<span class="kw">const</span> arr3 <span class="op">=</span> [...<span class="at">arr</span>]<span class="op">;</span></code></pre></div>
<h3 id="箭头函数">箭头函数</h3>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// function foo(){</span>
<span class="co">//     console.log(&#39;hello&#39;);</span>
<span class="co">// }</span>
<span class="co">// foo();</span>

<span class="co">//相当于</span>
<span class="kw">let</span> foo <span class="op">=</span> ()<span class="op">=&gt;</span><span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;hello&#39;</span>)<span class="op">;</span>
<span class="at">foo</span>()<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//function foo(v){</span>
<span class="co">//    return v;</span>
<span class="co">//}</span>

<span class="co">//相当于</span>
<span class="kw">let</span> foo <span class="op">=</span> v<span class="op">=&gt;</span>v<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">let</span> foo <span class="op">=</span> (a<span class="op">,</span>b)<span class="op">=&gt;</span><span class="va">console</span>.<span class="at">log</span>(a<span class="op">+</span>b)<span class="op">;</span>
<span class="at">foo</span>(<span class="dv">1</span><span class="op">,</span><span class="dv">2</span>)<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">let</span> foo <span class="op">=</span> (a<span class="op">,</span>b)<span class="op">=&gt;{</span>
    <span class="kw">let</span> c <span class="op">=</span> <span class="dv">1</span><span class="op">;</span>
    <span class="va">console</span>.<span class="at">log</span>(a<span class="op">+</span>b<span class="op">+</span>c)<span class="op">;</span>
<span class="op">}</span>
<span class="at">foo</span>(<span class="dv">1</span><span class="op">,</span><span class="dv">2</span>)<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">let</span> arr <span class="op">=</span> [<span class="dv">123</span><span class="op">,</span><span class="dv">456</span><span class="op">,</span><span class="dv">789</span>]<span class="op">;</span>
<span class="co">// arr.forEach(function(element,index){</span>
<span class="co">//     console.log(element,index);</span>
<span class="co">// });</span>
<span class="va">arr</span>.<span class="at">forEach</span>((element<span class="op">,</span>index)<span class="op">=&gt;{</span>
    <span class="va">console</span>.<span class="at">log</span>(element<span class="op">,</span>index)<span class="op">;</span>
<span class="op">}</span>)<span class="op">;</span></code></pre></div>
<h3 id="箭头函数-1">箭头函数</h3>
<ul>
<li>箭头函数中this取决于函数的定义，而不是调用</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">foo</span>()<span class="op">{</span>
    <span class="va">console</span>.<span class="at">log</span>(<span class="kw">this</span>)<span class="op">;</span><span class="co">//global对象</span>
<span class="op">}</span>

<span class="at">foo</span>()<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">foo</span>()<span class="op">{</span>
    <span class="co">//之前学过的知识点：函数中的函数中的this代表的是全局window对象</span>
    <span class="at">setTimeout</span>(<span class="kw">function</span>()<span class="op">{</span>
        <span class="va">console</span>.<span class="at">log</span>(<span class="kw">this</span>.<span class="at">num</span>)<span class="op">;</span><span class="co">//打印结果：undefined</span>
    <span class="op">},</span><span class="dv">100</span>)
<span class="op">}</span>
<span class="va">foo</span>.<span class="at">call</span>(<span class="op">{</span><span class="dt">num</span><span class="op">:</span><span class="dv">1</span><span class="op">}</span>)<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//这个代码应该比较难看懂，多花些时间</span>
<span class="kw">function</span> <span class="at">foo</span>()<span class="op">{</span>
    <span class="co">//使用call调用foo时，这里的this其实就是call的第一个参数</span>
    <span class="at">setTimeout</span>(()<span class="op">=&gt;{</span>
        <span class="va">console</span>.<span class="at">log</span>(<span class="kw">this</span>.<span class="at">num</span>)<span class="op">;</span><span class="co">//打印结果：1</span>
    <span class="op">},</span><span class="dv">100</span>)
<span class="op">}</span>
<span class="va">foo</span>.<span class="at">call</span>(<span class="op">{</span><span class="dt">num</span><span class="op">:</span><span class="dv">1</span><span class="op">}</span>)<span class="op">;</span></code></pre></div>
<ul>
<li>箭头函数不可以new</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">let</span> foo <span class="op">=</span> ()<span class="op">=&gt;{</span><span class="kw">this</span>.<span class="at">num</span><span class="op">=</span><span class="dv">123</span><span class="op">;}</span>
<span class="kw">new</span> <span class="at">foo</span>()<span class="co">//报错</span></code></pre></div>
<ul>
<li>箭头函数不可以使用arguments获取参数列表，可以使用rest代替</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">let</span> fn <span class="op">=</span> (...<span class="at">rest</span>)<span class="op">=&gt;{</span>
    <span class="va">console</span>.<span class="at">log</span>(rest <span class="kw">instanceof</span> Array)<span class="op">;</span>
<span class="op">}</span>
<span class="at">fn</span>()<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">let</span> foo <span class="op">=</span> (...<span class="at">param</span>)<span class="op">=&gt;{</span>
    <span class="va">console</span>.<span class="at">log</span>(param)<span class="op">;</span>
<span class="op">}</span>
<span class="at">foo</span>(<span class="dv">123</span><span class="op">,</span><span class="dv">456</span>)<span class="op">;</span></code></pre></div>
<h2 id="node.js基础-类与继承-1231">02-Node.js基础-类与继承-12:31</h2>
<ul>
<li>复习
<ul>
<li>构造函数</li>
<li>如何理解静态方法</li>
<li>如何实现继承 -&gt; https://github.com/zhengwei1949/learn_javascript_oop_the_easy_way</li>
</ul></li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">Animal</span>(name)<span class="op">{</span>
    <span class="kw">this</span>.<span class="at">name</span> <span class="op">=</span> name<span class="op">;</span>
<span class="op">}</span>
<span class="va">Animal</span>.<span class="va">prototype</span>.<span class="at">showName</span> <span class="op">=</span> <span class="kw">function</span>()<span class="op">{</span>
    <span class="va">console</span>.<span class="at">log</span>(<span class="kw">this</span>.<span class="at">name</span>)<span class="op">;</span>
<span class="op">}</span>
<span class="kw">var</span> a <span class="op">=</span> <span class="kw">new</span> <span class="at">Animal</span>(<span class="st">&#39;Tom&#39;</span>)<span class="op">;</span>
<span class="va">a</span>.<span class="at">showName</span>()<span class="op">;</span>
<span class="kw">var</span> a1 <span class="op">=</span> <span class="kw">new</span> <span class="at">Animal</span>(<span class="st">&#39;Jerry&#39;</span>)<span class="op">;</span>
<span class="va">a1</span>.<span class="at">showName</span>()<span class="op">;</span></code></pre></div>
<div class="figure">
<img src="http://www.listverse.info/wp-content/uploads/2014/11/4-tom-and-jerry-logo-4-300x210.png" />

</div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">class</span> Animal<span class="op">{</span>
    <span class="at">constructor</span>(name)<span class="op">{</span>
        <span class="kw">this</span>.<span class="at">name</span> <span class="op">=</span> name<span class="op">;</span>
    <span class="op">}</span>

    <span class="at">showName</span>()<span class="op">{</span>
        <span class="va">console</span>.<span class="at">log</span>(<span class="kw">this</span>.<span class="at">name</span>)<span class="op">;</span>
    <span class="op">}</span>
<span class="op">}</span>

<span class="kw">let</span> a <span class="op">=</span> <span class="kw">new</span> <span class="at">Animal</span>(<span class="st">&#39;spike&#39;</span>)<span class="op">;</span>
<span class="va">a</span>.<span class="at">showName</span>()<span class="op">;</span></code></pre></div>
<div class="figure">
<img src="http://img1.imgtn.bdimg.com/it/u=3885866757,4217768438&amp;fm=26&amp;gp=0.jpg" />

</div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//静态方法</span>
<span class="kw">class</span> Animal<span class="op">{</span>
    <span class="co">//静态方法只能通过类名调用，不可以通过实例对象调用</span>
    <span class="kw">static</span> <span class="at">showInfo</span>()<span class="op">{</span>
        <span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;hi&#39;</span>)<span class="op">;</span>
    <span class="op">}</span>
    <span class="at">constructor</span>(name)<span class="op">{</span>
        <span class="kw">this</span>.<span class="at">name</span> <span class="op">=</span> name<span class="op">;</span>
    <span class="op">}</span>

    <span class="at">showName</span>()<span class="op">{</span>
        <span class="va">console</span>.<span class="at">log</span>(<span class="kw">this</span>.<span class="at">name</span>)<span class="op">;</span>
    <span class="op">}</span>
<span class="op">}</span>

<span class="kw">let</span> a <span class="op">=</span> <span class="kw">new</span> <span class="at">Animal</span>(<span class="st">&#39;spike&#39;</span>)<span class="op">;</span>
<span class="va">a</span>.<span class="at">showName</span>()<span class="op">;</span>
<span class="va">Animal</span>.<span class="at">showInfo</span>()<span class="op">;</span></code></pre></div>
<h3 id="继承">继承</h3>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">class</span> Animal<span class="op">{</span>
    <span class="co">//静态方法只能通过类名调用，不可以通过实例对象调用</span>
    <span class="kw">static</span> <span class="at">showInfo</span>()<span class="op">{</span>
        <span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;hi&#39;</span>)<span class="op">;</span>
    <span class="op">}</span>
    <span class="at">constructor</span>(name)<span class="op">{</span>
        <span class="kw">this</span>.<span class="at">name</span> <span class="op">=</span> name<span class="op">;</span>
    <span class="op">}</span>

    <span class="at">showName</span>()<span class="op">{</span>
        <span class="va">console</span>.<span class="at">log</span>(<span class="kw">this</span>.<span class="at">name</span>)<span class="op">;</span>
    <span class="op">}</span>
<span class="op">}</span>

<span class="kw">class</span> Dog <span class="kw">extends</span> Animal<span class="op">{</span>
    <span class="at">constructor</span>(name<span class="op">,</span>color)<span class="op">{</span>
        <span class="kw">super</span>(name)<span class="op">;</span><span class="co">//super用来调用父类</span>
        <span class="kw">this</span>.<span class="at">color</span> <span class="op">=</span> color<span class="op">;</span>f
    <span class="op">}</span>

    <span class="at">showColor</span>()<span class="op">{</span>
        <span class="va">console</span>.<span class="at">log</span>(<span class="kw">this</span>.<span class="at">color</span>)<span class="op">;</span>
    <span class="op">}</span>
<span class="op">}</span>

<span class="kw">let</span> d <span class="op">=</span> <span class="kw">new</span> <span class="at">Dog</span>(<span class="st">&#39;doudou&#39;</span><span class="op">,</span><span class="st">&#39;yellow&#39;</span>)<span class="op">;</span>
<span class="va">d</span>.<span class="at">showName</span>()<span class="op">;</span>
<span class="va">d</span>.<span class="at">showColor</span>()<span class="op">;</span>
<span class="va">Dog</span>.<span class="at">showInfo</span>()<span class="op">;</span></code></pre></div>
<h2 id="练习">练习</h2>
<ol style="list-style-type: decimal">
<li><p>箭头函数支持的两种写法是什么？箭头函数里的this指向谁？</p></li>
<li><p>如何用es6的方法定义一个类，？（写个小例子，里面要包括公共方法私有方法和继承）</p></li>
<li><p>以下str用es6的方法怎么写？</p></li>
</ol>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> name<span class="op">=</span><span class="st">&#39;cat&#39;</span><span class="op">,</span>age<span class="op">=</span><span class="dv">1</span><span class="op">,</span>
<span class="kw">var</span> str<span class="op">=</span>name<span class="op">+</span><span class="st">&#39;is&#39;</span><span class="op">+</span>age<span class="op">+</span><span class="st">&#39;years old&#39;</span></code></pre></div>
<ol start="4" style="list-style-type: decimal">
<li>以下数组怎么用解构赋值的方法怎么解析成一个个变量？</li>
</ol>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">    <span class="kw">var</span> ary<span class="op">=</span>[<span class="st">&#39;cat&#39;</span><span class="op">,</span><span class="st">&#39;dog&#39;</span><span class="op">,</span><span class="st">&#39;fox&#39;</span>]
    </code></pre></div>
<ol start="5" style="list-style-type: decimal">
<li><p>es6函数怎么定义默认参数？怎么传任意参数的？（写个函数小例子）</p></li>
<li><p>写一下let和const的区别</p></li>
<li><p>将下面的代码翻译为es5，只要求实现功能即可，不要求翻译质量</p></li>
</ol>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">class</span> Animal<span class="op">{</span>
    <span class="at">constructor</span>(...<span class="at">args</span>)<span class="op">{</span>
        [<span class="kw">this</span>.<span class="at">name</span><span class="op">,</span> <span class="kw">this</span>.<span class="at">gender</span><span class="op">,</span> <span class="kw">this</span>.<span class="at">age</span>] <span class="op">=</span> args<span class="op">;</span>
    <span class="op">}</span>

    <span class="at">getInfo</span>()<span class="op">{</span>
        <span class="va">console</span>.<span class="at">log</span>(<span class="vs">`A </span><span class="sc">${</span><span class="kw">this</span>.<span class="at">age</span><span class="sc">}</span><span class="vs"> years old </span><span class="sc">${</span><span class="kw">this</span>.<span class="at">gender</span><span class="sc">}</span><span class="vs"> </span><span class="sc">${</span><span class="kw">this</span>.<span class="at">name</span><span class="sc">}</span><span class="vs">`</span>)<span class="op">;</span>
    <span class="op">}</span>
<span class="op">}</span>

<span class="kw">new</span> <span class="at">Animal</span>(<span class="st">&#39;cat&#39;</span><span class="op">,</span> <span class="st">&#39;male&#39;</span><span class="op">,</span> <span class="st">&#39;two&#39;</span>).<span class="at">getInfo</span>()<span class="op">;</span> <span class="co">// A two years old male cat</span></code></pre></div>
<ol start="8" style="list-style-type: decimal">
<li>说出下面代码的意思(难度级别：五星 主要考察的是解构赋值，如果不会，可以把代码粘贴到http://babeljs.io/repl/看看转换成es5的样子)</li>
</ol>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> foo <span class="op">=</span> (<span class="op">{</span><span class="dt">hello</span><span class="op">:{</span><span class="dt">world</span><span class="op">:</span>bar<span class="op">}}</span>)<span class="op">=&gt;</span>(<span class="op">{</span>bar<span class="op">}</span>)</code></pre></div>
<h2 id="编码">编码</h2>
<h3 id="电脑只存存二进制数据">电脑只存存二进制数据</h3>
<div class="figure">
<img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-28/96573603.jpg" />

</div>
<p>正如hash表示的是锚点值(location.hash),在Node.js当中，二进制叫Buffer</p>
<div class="figure">
<img src="https://imgsa.baidu.com/exp/w=480/sign=850d8379384e251fe2f7e5f09787c9c2/d1160924ab18972b103e2189eecd7b899e510a68.jpg" />

</div>
<h3 id="node.js中与编码相关的api----buffer">node.js中与编码相关的api --&gt; Buffer</h3>
<ul>
<li>在node.js当中，使用Buffer这个构造器来把字符类型的数据转换成二进制的数据</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> buf <span class="op">=</span> <span class="kw">new</span> <span class="at">Buffer</span>(<span class="st">&#39;abc&#39;</span><span class="op">,</span><span class="st">&#39;utf8&#39;</span>)<span class="op">;</span><span class="co">//默认就是utf8格式的，后面的可以不用写的</span>
<span class="va">console</span>.<span class="at">log</span>(buf)<span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(<span class="va">buf</span>.<span class="at">toString</span>())<span class="op">;</span><span class="co">//可以把二进制的转换成utf8格式的数据</span></code></pre></div>
<p>或者</p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> buf <span class="op">=</span> <span class="va">Buffer</span>.<span class="at">from</span>(<span class="st">&#39;abc&#39;</span>)<span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(buf)<span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(<span class="va">buf</span>.<span class="at">toString</span>())<span class="op">;</span></code></pre></div>
<h2 id="node.js基础-异步编程概念分析-1125">03-Node.js基础-异步编程概念分析-11:25</h2>
<h3 id="感性的认识异步">感性的认识异步</h3>
<p>火车站买票的例子(同步) vs 银行叫号排队的例子(异步)</p>
<h3 id="通过一个例子来理解js执行代码的流程不考虑预解析">通过一个例子来理解js执行代码的流程(不考虑预解析)</h3>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> a <span class="op">=</span> <span class="dv">1</span><span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(a)<span class="op">;</span>
<span class="kw">var</span> xhr <span class="op">=</span> <span class="kw">new</span> <span class="at">XMLHttpRequest</span>()<span class="op">;</span>
<span class="va">xhr</span>.<span class="at">open</span>(<span class="st">&#39;GET&#39;</span><span class="op">,</span><span class="st">&#39;./a.json&#39;</span>)<span class="op">;</span>
<span class="va">xhr</span>.<span class="at">onreadystatechange</span> <span class="op">=</span> <span class="kw">function</span>()<span class="op">{</span>
    <span class="cf">if</span>(<span class="va">xhr</span>.<span class="at">status</span> <span class="op">===</span> <span class="dv">200</span> <span class="op">&amp;&amp;</span> <span class="va">xhr</span>.<span class="at">readyState</span> <span class="op">===</span> <span class="dv">4</span>)<span class="op">{</span>
        <span class="va">console</span>.<span class="at">log</span>(<span class="va">xhr</span>.<span class="at">responseText</span>)<span class="op">;</span>
    <span class="op">}</span>
<span class="op">}</span>
<span class="va">xhr</span>.<span class="at">send</span>(<span class="kw">null</span>)<span class="op">;</span>
<span class="at">setTimeout</span>(<span class="kw">function</span>()<span class="op">{</span>
    <span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;定时器执行&#39;</span>)<span class="op">;</span>
<span class="op">},</span><span class="dv">200</span>)<span class="op">;</span>
<span class="kw">var</span> b <span class="op">=</span> <span class="dv">2</span><span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(b)<span class="op">;</span></code></pre></div>
<h4 id="预置知识点">预置知识点</h4>
<p>要想理解这个过程，必须要明白下面几个东西： 1、js是单线程的，也就是一次只能执行一件事情 + 单线程：一个车间，一次只能做一件事情 + 多进程：有一堆的车间，可以给每个任务分配一个车间执行相应的任务 2、浏览器是多线程(进程)的，有的进程用来渲染css,有的进程用来渲染html,有的进程用来请求ajax,有的进程用来请求页面的图片、js、css等静态文件资源 3、event loop用来管理我们的异步的代码的，它会把它们放在一个线程池当中</p>
<h4 id="理解整个流程">理解整个流程</h4>
<ol style="list-style-type: decimal">
<li>浏览器加载当前的js文件，主js线程可以从上往下运行</li>
<li>执行<code>var a = 1</code></li>
<li>执行<code>console.log(a)</code></li>
<li>创建一个xhr对象，把这个对象的相关操作和onreadystatechange后面的回调函数放到事件循环event loop当中</li>
<li>把定时器和对应的回调函数放到我们的event loop当中</li>
<li>event loop会管理我们的异步的任务，当异步任务执行完了（如果是定时器则是定时器到期了）之后，把对应的回调函数放到一个叫回调函数队列当中</li>
<li>当主js线程中的代码全部执行完了之后，处于空闲状态，去回调函数队列当中去找有没有任务可以执行，如果有的话就取出来靠最前面的拿出来执行</li>
</ol>
<h4 id="如何理解io">如何理解I/O</h4>
<ul>
<li>input --&gt; 把内容写入文件、请求报文</li>
<li>output --&gt; 读取文件中的内容、响应报文</li>
</ul>
<div class="figure">
<img src="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1505670692729&amp;di=3e98401665992190ef8804d664e7f741&amp;imgtype=0&amp;src=http%3A%2F%2Fpimg.haitao.com%2Fimg%2F0%2F10%2F10351%2F10351_0.jpg" />

</div>
<div class="figure">
<img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-14/38065358.jpg" />

</div>
<div class="figure">
<img src="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1505670716687&amp;di=5b0307ce47a30c7cda3766e94edd866f&amp;imgtype=0&amp;src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb7003af33a87e950c7e6a44b1a385343fbf2b420.jpg" />

</div>
<h2 id="node.js基础-查看文件状态-1405">04-Node.js基础-查看文件状态-14:05</h2>
<p>这个api不用记，后面用不上，主要是为了体会Node.js的代码的写法</p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//通过此代码理解回调函数的第一个参数错误对象</span>
<span class="kw">const</span> fs <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;fs&#39;</span>)<span class="op">;</span>
<span class="va">fs</span>.<span class="at">stat</span>(<span class="st">&#39;./data.txt&#39;</span><span class="op">,</span>(err<span class="op">,</span>stats)<span class="op">=&gt;{</span>
    <span class="co">//一般回调函数的第一个参数是错误对象，如果没有出错正确执行了，则err表示null,否则就是一个错误对象了</span>
    <span class="va">console</span>.<span class="at">log</span>(err)<span class="op">;</span>
<span class="op">}</span>)<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//判断是文件还是目录</span>
<span class="kw">const</span> fs <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;fs&#39;</span>)<span class="op">;</span>
<span class="va">fs</span>.<span class="at">stat</span>(<span class="st">&#39;./data.txt&#39;</span><span class="op">,</span>(err<span class="op">,</span>stats)<span class="op">=&gt;{</span>
    <span class="co">//一般回调函数的第一个参数是错误对象，如果没有出错正确执行了，则err表示null,否则就是一个错误对象了</span>
    <span class="cf">if</span>(err)<span class="cf">return</span><span class="op">;</span>
    <span class="cf">if</span>(<span class="va">stats</span>.<span class="at">isFile</span>())<span class="op">{</span>
        <span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;是文件&#39;</span>)<span class="op">;</span>
    <span class="op">}</span><span class="cf">else</span> <span class="cf">if</span>(<span class="va">stats</span>.<span class="at">isDirectory</span>())<span class="op">{</span>
        <span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;是目录&#39;</span>)<span class="op">;</span>
    <span class="op">}</span>
<span class="op">}</span>)<span class="op">;</span></code></pre></div>
<h3 id="补充同步的方式">补充:同步的方式</h3>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> fs <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;fs&#39;</span>)<span class="op">;</span>
<span class="co">//同步操作</span>
<span class="kw">let</span> ret <span class="op">=</span> <span class="va">fs</span>.<span class="at">statSync</span>(<span class="st">&#39;./data.txt&#39;</span>)<span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(ret)<span class="op">;</span></code></pre></div>
<div class="figure">
<img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-14/58989951.jpg" />

</div>
<h2 id="node.js基础-读文件操作-928掌握">05-Node.js基础-读文件操作-9:28(掌握)</h2>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//异步操作方式</span>
<span class="kw">const</span> fs <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;fs&#39;</span>)<span class="op">;</span>
<span class="kw">const</span> path <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;path&#39;</span>)<span class="op">;</span>

<span class="kw">let</span> strpath <span class="op">=</span> <span class="va">path</span>.<span class="at">join</span>(__dirname<span class="op">,</span><span class="st">&#39;data.txt&#39;</span>)<span class="op">;</span>
<span class="va">fs</span>.<span class="at">readFile</span>(strpath<span class="op">,</span>(err<span class="op">,</span>data)<span class="op">=&gt;{</span>
    <span class="cf">if</span>(err) <span class="cf">return</span><span class="op">;</span>
    <span class="va">console</span>.<span class="at">log</span>(<span class="va">data</span>.<span class="at">toString</span>())<span class="op">;</span>
<span class="op">}</span>)</code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//异步操作方式</span>
<span class="kw">const</span> fs <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;fs&#39;</span>)<span class="op">;</span>
<span class="kw">const</span> path <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;path&#39;</span>)<span class="op">;</span>

<span class="kw">let</span> strpath <span class="op">=</span> <span class="va">path</span>.<span class="at">join</span>(__dirname<span class="op">,</span><span class="st">&#39;data.txt&#39;</span>)<span class="op">;</span>
<span class="va">fs</span>.<span class="at">readFile</span>(strpath<span class="op">,</span><span class="st">&#39;utf8&#39;</span><span class="op">,</span>(err<span class="op">,</span>data)<span class="op">=&gt;{</span>
    <span class="cf">if</span>(err) <span class="cf">return</span><span class="op">;</span>
    <span class="va">console</span>.<span class="at">log</span>(data)<span class="op">;</span>
<span class="op">}</span>)</code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//同步操作方式</span>
<span class="kw">const</span> fs <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;fs&#39;</span>)<span class="op">;</span>
<span class="kw">const</span> path <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;path&#39;</span>)<span class="op">;</span>

<span class="kw">let</span> strpath <span class="op">=</span> <span class="va">path</span>.<span class="at">join</span>(__dirname<span class="op">,</span><span class="st">&#39;data.txt&#39;</span>)<span class="op">;</span>
<span class="kw">let</span> ret <span class="op">=</span> <span class="va">fs</span>.<span class="at">readFileSync</span>(strpath<span class="op">,</span><span class="st">&#39;utf8&#39;</span>)<span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(ret)<span class="op">;</span></code></pre></div>
<h2 id="node.js基础-写文件操作-827">06-Node.js基础-写文件操作-8:27</h2>
<h3 id="注意事项">注意事项</h3>
<ul>
<li>如果该文件存在，则是覆盖内容</li>
<li>如果不存在，则node会帮我们创建这个文件</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//写文件的异步操作方式</span>
<span class="kw">const</span> fs <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;fs&#39;</span>)<span class="op">;</span>
<span class="kw">const</span> path <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;path&#39;</span>)<span class="op">;</span>

<span class="kw">let</span> strpath <span class="op">=</span> <span class="va">path</span>.<span class="at">join</span>(__dirname<span class="op">,</span><span class="st">&#39;data.txt&#39;</span>)<span class="op">;</span>
<span class="co">// fs.writeFile(strpath,&#39;hello nihao&#39;,&#39;utf8&#39;,(err)=&gt;{</span>
<span class="co">//     if(!err){</span>
<span class="co">//         console.log(&#39;文件写入成功&#39;);</span>
<span class="co">//     }</span>
<span class="co">// });</span>

<span class="kw">let</span> buf <span class="op">=</span> <span class="va">Buffer</span>.<span class="at">from</span>(<span class="st">&#39;hi&#39;</span>)<span class="op">;</span>
<span class="va">fs</span>.<span class="at">writeFile</span>(strpath<span class="op">,</span>buf<span class="op">,</span><span class="st">&#39;utf8&#39;</span><span class="op">,</span>(err)<span class="op">=&gt;{</span>
    <span class="cf">if</span>(<span class="op">!</span>err)<span class="op">{</span>
        <span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;文件写入成功&#39;</span>)<span class="op">;</span>
    <span class="op">}</span>
<span class="op">}</span>)<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//写文件的同步操作方式</span>
<span class="kw">const</span> fs <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;fs&#39;</span>)<span class="op">;</span>
<span class="kw">const</span> path <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;path&#39;</span>)<span class="op">;</span>

<span class="kw">let</span> strpath <span class="op">=</span> <span class="va">path</span>.<span class="at">join</span>(__dirname<span class="op">,</span><span class="st">&#39;data.txt&#39;</span>)<span class="op">;</span>
<span class="va">fs</span>.<span class="at">writeFileSync</span>(strpath<span class="op">,</span><span class="st">&#39;tom and jerry&#39;</span>)<span class="op">;</span></code></pre></div>
<h2 id="node.js基础-文件的流式操作-1300">07-Node.js基础-文件的流式操作-13:00</h2>
<h3 id="使用fs.readfile不能读取超大文件">使用fs.readFile不能读取超大文件</h3>
<p>演示一下用fs.readFile读取超大文件 --&gt; 失败 --&gt; 原因：读文件需要把整个文件读入内存，我们的操作系统给node.js分配的最大限度的内存没这么多，出错 ---&gt; 流式操作</p>
<h3 id="流式操作">流式操作</h3>
<ul>
<li>fs.createReadStream --&gt; 创建可读流</li>
<li>fs.createWriteStream --&gt; 创建可写流</li>
</ul>
<h3 id="如何理解">如何理解</h3>
<ul>
<li>传统读写文件 --&gt; 直接把一大坨东西移到另一个地方，如果不是大力士根本搞不定</li>
<li>流式操作文件 --&gt; 把大文件想像成是一个大的冰块，我们融化它，然后慢慢的一点点用瓢舀过去</li>
</ul>
<p><img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-16/76013854.jpg" /> <img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-16/47168490.jpg" /></p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> path <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;path&#39;</span>)<span class="op">;</span>
<span class="kw">const</span> fs <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;fs&#39;</span>)<span class="op">;</span>

<span class="kw">let</span> spath <span class="op">=</span> <span class="va">path</span>.<span class="at">join</span>(__dirname<span class="op">,</span><span class="st">&#39;../03-source&#39;</span><span class="op">,</span><span class="st">&#39;file.zip&#39;</span>)<span class="op">;</span><span class="co">//源路径</span>
<span class="kw">let</span> dpath <span class="op">=</span> <span class="va">path</span>.<span class="at">join</span>(<span class="st">&#39;C:</span><span class="sc">\\</span><span class="st">Users</span><span class="sc">\\</span><span class="st">www</span><span class="sc">\\</span><span class="st">Desktop&#39;</span><span class="op">,</span><span class="st">&#39;file.zip&#39;</span>) <span class="co">//目标路径</span>

<span class="kw">let</span> readStream <span class="op">=</span> <span class="va">fs</span>.<span class="at">createReadStream</span>(spath)<span class="op">;</span><span class="co">//创建可读流</span>
<span class="kw">let</span> writeStream <span class="op">=</span> <span class="va">fs</span>.<span class="at">createWriteStream</span>(dpath)<span class="op">;</span><span class="co">//创建可写流</span>

<span class="co">//基于事件的处理方式</span>
<span class="co">// $(&#39;input[type=button]&#39;).on(&#39;click&#39;,function(){</span>
<span class="co">//     console.log(&#39;hello&#39;);</span>
<span class="co">// })</span>

<span class="kw">let</span> num <span class="op">=</span> <span class="dv">1</span><span class="op">;</span>
<span class="co">//chunk就是舀出来的每一小块数据</span>
<span class="co">//这块data,end事件的代码是重点，要能自己写出来</span>
<span class="va">readStream</span>.<span class="at">on</span>(<span class="st">&#39;data&#39;</span><span class="op">,</span>(chunk)<span class="op">=&gt;{</span>
    num<span class="op">++;</span>
    <span class="va">writeStream</span>.<span class="at">write</span>(chunk)<span class="op">;</span>
<span class="op">}</span>)<span class="op">;</span>

<span class="va">readStream</span>.<span class="at">on</span>(<span class="st">&#39;end&#39;</span><span class="op">,</span>()<span class="op">=&gt;{</span>
    <span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;文件处理完成&#39;</span>)<span class="op">;</span>
<span class="op">}</span>)</code></pre></div>
<h3 id="管道的方式">管道的方式</h3>
<ul>
<li>复习gulp的玩法</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> path <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;path&#39;</span>)<span class="op">;</span>
<span class="kw">const</span> fs <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;fs&#39;</span>)<span class="op">;</span>

<span class="kw">let</span> spath <span class="op">=</span> <span class="va">path</span>.<span class="at">join</span>(__dirname<span class="op">,</span><span class="st">&#39;../03-source&#39;</span><span class="op">,</span><span class="st">&#39;file.zip&#39;</span>)<span class="op">;</span><span class="co">//源路径</span>
<span class="kw">let</span> dpath <span class="op">=</span> <span class="va">path</span>.<span class="at">join</span>(<span class="st">&#39;C:</span><span class="sc">\\</span><span class="st">Users</span><span class="sc">\\</span><span class="st">www</span><span class="sc">\\</span><span class="st">Desktop&#39;</span><span class="op">,</span><span class="st">&#39;file.zip&#39;</span>) <span class="co">//目标路径</span>

<span class="kw">let</span> readStream <span class="op">=</span> <span class="va">fs</span>.<span class="at">createReadStream</span>(spath)<span class="op">;</span><span class="co">//创建可读流</span>
<span class="kw">let</span> writeStream <span class="op">=</span> <span class="va">fs</span>.<span class="at">createWriteStream</span>(dpath)<span class="op">;</span><span class="co">//创建可写流</span>

<span class="va">readStream</span>.<span class="at">pipe</span>(writeStream)<span class="op">;</span></code></pre></div>
<h2 id="node.js基础-初识包概念-536主要讲全局方式">08-Node.js基础-初识包概念-5:36(主要讲全局方式)</h2>
<h3 id="复习前面讲过的模块">复习前面讲过的模块</h3>
<ul>
<li>内置模块：fs,path</li>
<li>自定义模块(也就是一个js算一个模块，意味着自己写的js文件)</li>
</ul>
<h3 id="复习gulp的用法">复习gulp的用法</h3>
<ul>
<li>思考：我们通过npm进行下载gulp,gulp-uglify,然后通过require进行引入，但是引入的既不是内置模块，也不算是自定义模块，那算什么东西呢?</li>
</ul>
<h3 id="如何理解包">如何理解包</h3>
<ul>
<li>模块可以理解成文件，包可以理解成文件夹（里面有很多文件）</li>
<li>不过，在很多书或文章里面，包和模块这二个是同一个意思，了解即可</li>
</ul>
<h2 id="node.js基础-npm基本使用-1122">09-Node.js基础-npm基本使用-11:22</h2>
<h3 id="常用npm命令">常用npm命令</h3>
<ul>
<li><code>npm install -g 包名称@版本号</code></li>
<li><code>npm update -g 包名</code> --&gt; 更新到最新版</li>
<li><code>npm install -g 包名@latest</code> 更新到最新版(推荐使用)</li>
</ul>
<h2 id="node.js基础-npm基本使用-1124主要讲本地模式">10-Node.js基础-npm基本使用-11:24(主要讲本地模式)</h2>
<ul>
<li>scripts属性的作用(体会一下作用，方便我们操作) ### 在node.js中使用art-template(这个网站打不开的话，必须要翻墙，这块代码因为之前玩过，如果感觉熟悉可以不练习) ### 包的查找机制(当我们看到require(标识符)的时候，我们去哪找?)</li>
<li>如果是相对绝对路径，则去找自定义模块(js&gt;json&gt;node)</li>
<li>如果是不带任何相对绝对路径字样，则先判断是不是内置模块，如果不是则去找第三方的包，去当前找一个叫node_modules里面去找文件夹名字叫这个的，如果找到了，先看看有没有一个叫package.json的文件，如果有，则去里面找main里面的配置的文件，如果没有package.json,则去找index.js文件</li>
</ul>
<h2 id="node.js基础-npm基本使用-704讲--save和--save-dev的区别">11-Node.js基础-npm基本使用-7:04(讲--save和--save-dev的区别)</h2>
<ul>
<li>jquery,zepto,angular --&gt; --save</li>
<li>webpack,gulp --&gt; --save-dev</li>
</ul>
<h2 id="node.js基础-修改npm镜像地址-1141">12-Node.js基础-修改npm镜像地址-11:41</h2>
<ul>
<li>设置registry镜像源(最方便，适合网不快的情况下) 上课的时候设置一下这个即可</li>
</ul>
<pre class="shell"><code>npm config get registry --&gt; 查看镜像
npm config set registry https://registry.npm.taobao.org --&gt; 设置镜像为taobao</code></pre>
<ul>
<li>cnpm(最稳定),推荐使用这个，因为如果只是通过set registry修改镜像源经测试不能解决node-sass安装的问题</li>
</ul>
<pre class="shell"><code>npm install -g cnpm --registry=https://registry.npm.taobao.org</code></pre>
<ul>
<li>nrm(我用了一段时间，感觉这种方式比较坑，有时间下载包的话经常会报错，建议不要用</li>
</ul>
<h2 id="node.js基础-yarn基本使用-712">13-Node.js基础-yarn基本使用-7:12</h2>
<p>对npm的要求是掌握会用，对yarn的要求是了解即可，因为以后百分之九十的情况下用的是npm,yarn很少用</p>
<ul>
<li>npm init --&gt; yarn init</li>
<li>npm install 包名 --save --&gt; yarn add 包名</li>
<li>npm uninstall 包名 --&gt; yarn remove 包名</li>
<li>npm update 包名 --&gt; yarn upgrade 包名</li>
<li>npm install 包名 --save-dev --&gt; yarn add 包名 -dev</li>
<li>npm install -g 包名 --&gt; yarn global add 包名</li>
<li>npm config set registry https://registry.npm.taobao.org --&gt; yarn config set registry https://registry.npm.taobao.org</li>
<li>npm install --&gt; yarn install</li>
<li>npm run --&gt; yarn run</li>
</ul>
<h3 id="补充一个命令rimraf超好用">补充一个命令rimraf(超好用)</h3>
<pre><code>+ 作用：删除node_modules文件夹</code></pre>
<h2 id="node.js基础-自定义包案例">14-Node.js基础-自定义包案例</h2>
<p>这里面要理解的是包没什么神秘的，只要符合我们刚才说的规范，我们也可以自己搞出来一个包</p>
<h3 id="包的规范">包的规范</h3>
<ul>
<li>package.json必须在包的顶层目录下</li>
<li>二进制文件应该放在bin目录下</li>
<li>js代码要放在lib目录下</li>
<li>文档放在doc目录下</li>
<li>单元测试文件放在test目录下(和我们没有关系，和测试人员有关)</li>
</ul>
<h3 id="package.json字段分析">package.json字段分析</h3>
<ul>
<li>name:包的名称，必须是唯一的，由小写字母、数字和下划线组成，不能包含空格</li>
<li>description:包的简要说明</li>
<li>version:符合语义化版本识别规范的版本字符串</li>
<li>keywords:关键字数组，通常用于搜索(无用)</li>
<li>maintainers:维护者数组(无用)</li>
<li>contributors:贡献者数组(无用)</li>
<li>bugs:(无用)</li>
<li>licences(无用)</li>
<li>repositories(无用)</li>
<li>dependencies:生产环境包的依赖，一个关联数组，由包的名称和版本号组成</li>
<li>devDependencies:开发环境包的依赖，一个关联数组，由包的名称和版本号组成</li>
</ul>
<h3 id="综合案例">综合案例</h3>
<h4 id="思考">思考</h4>
<ul>
<li>markdown-it可以让一个markdown的字符串转换成html</li>
<li>我们如何拥有一个markdown字符串? ---&gt; 把markdown文件读取进来 --&gt; 使用fs.readFile模块</li>
<li>转换完之后，我们如何写入文件当中 --&gt; fs.writeFile</li>
</ul>
<p>https://github.com/markdown-it/markdown-it#readme</p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> path <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;path&#39;</span>)<span class="op">;</span>
<span class="kw">const</span> fs <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;fs&#39;</span>)<span class="op">;</span>

<span class="kw">let</span> tplpath <span class="op">=</span> <span class="va">path</span>.<span class="at">join</span>(__dirname<span class="op">,</span><span class="st">&#39;tpl.html&#39;</span>)<span class="op">;</span>
<span class="kw">let</span> mdpath <span class="op">=</span> <span class="va">path</span>.<span class="at">join</span>(__dirname<span class="op">,</span><span class="st">&#39;demo.md&#39;</span>)<span class="op">;</span>
<span class="kw">let</span> targetpath <span class="op">=</span> <span class="va">path</span>.<span class="at">join</span>(__dirname<span class="op">,</span><span class="st">&#39;demo.html&#39;</span>)<span class="op">;</span>

<span class="kw">var</span> md <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;markdown-it&#39;</span>)()<span class="op">;</span>
<span class="co">// var result = md.render(&#39;## markdown-it rulezz!&#39;);</span>
<span class="co">// console.log(result);</span>

<span class="co">//获取markdown文件</span>
<span class="va">fs</span>.<span class="at">readFile</span>(mdpath<span class="op">,</span><span class="st">&#39;utf8&#39;</span><span class="op">,</span>(err<span class="op">,</span>data)<span class="op">=&gt;{</span>
    <span class="cf">if</span>(err)<span class="cf">return</span><span class="op">;</span>
    <span class="co">//对markdown内容进行转换操作</span>
    <span class="kw">let</span> result <span class="op">=</span> <span class="va">md</span>.<span class="at">render</span>(data)<span class="op">;</span>
    <span class="co">//读取模板内容</span>
    <span class="kw">let</span> tpl <span class="op">=</span> <span class="va">fs</span>.<span class="at">readFile</span>(tplpath<span class="op">,</span><span class="st">&#39;utf8&#39;</span><span class="op">,</span>(err<span class="op">,</span>tplData)<span class="op">=&gt;{</span>
        <span class="cf">if</span>(err)<span class="cf">return</span><span class="op">;</span>
        tplData <span class="op">=</span> <span class="va">tplData</span>.<span class="at">replace</span>(<span class="st">&#39;&lt;%content%&gt;&#39;</span><span class="op">,</span>result)<span class="op">;</span>
        <span class="co">//生成的最终页面写入目标文件</span>
        <span class="va">fs</span>.<span class="at">writeFile</span>(targetpath<span class="op">,</span>tplData<span class="op">,</span>(err)<span class="op">=&gt;{</span>
            <span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;转换完成&#39;</span>)<span class="op">;</span>
        <span class="op">}</span>)<span class="op">;</span>
    <span class="op">}</span>)<span class="op">;</span>
<span class="op">}</span>)<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
<span class="kw">&lt;html</span><span class="ot"> lang=</span><span class="st">&quot;en&quot;</span><span class="kw">&gt;</span>
<span class="kw">&lt;head&gt;</span>
    <span class="kw">&lt;meta</span><span class="ot"> charset=</span><span class="st">&quot;UTF-8&quot;</span><span class="kw">&gt;</span>
    <span class="kw">&lt;meta</span><span class="ot"> name=</span><span class="st">&quot;viewport&quot;</span><span class="ot"> content=</span><span class="st">&quot;width=device-width, initial-scale=1.0&quot;</span><span class="kw">&gt;</span>
    <span class="kw">&lt;meta</span><span class="ot"> http-equiv=</span><span class="st">&quot;X-UA-Compatible&quot;</span><span class="ot"> content=</span><span class="st">&quot;ie=edge&quot;</span><span class="kw">&gt;</span>
    <span class="kw">&lt;title&gt;</span>Document<span class="kw">&lt;/title&gt;</span>
<span class="kw">&lt;/head&gt;</span>
<span class="kw">&lt;body&gt;</span>
    <span class="er">&lt;</span>%content%&gt;
<span class="kw">&lt;/body&gt;</span>
<span class="kw">&lt;/html&gt;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode markdown"><code class="sourceCode markdown"><span class="fu"># 一级标题</span>
<span class="fu">## 二级标题</span>
<span class="fu">### 三级标题</span>
- <span class="fl">列表信息</span>
<span class="fl">    + 二级列表</span>
<span class="fl">        + 三级列表</span></code></pre></div>
<h1 id="day03">day03</h1>
<h2 id="注意-2">注意</h2>
<ul>
<li>今天的比较难，是为了讲原理，这块代码大家写一次以后不太有机会写了，所以自己写不出来没关系，以能理解为主</li>
</ul>
<h2 id="node.js-web开发-初识服务器模型-456">01-Node.js-web开发-初识服务器模型-4:56</h2>
<ul>
<li>其他的后端语言像php的服务器直接安装apache即可，但是node.js这块的功能必须自己用代码完成 --&gt; 如何理解?如果我们用的是php,我们的html,js,css直接放到apache就可以访问了，但是如果用的是apache,则必须用代码实现能让我们可以通过浏览器进行访问</li>
<li>这块写一个代码演示一下，只需要把js文件放在文件夹，运行一下就能把当前文件夹作为服务器</li>
</ul>
<div class="figure">
<img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-16/86259757.jpg" />

</div>
<h2 id="node.js-web开发-初步实现服务器功能-857">02-Node.js-web开发-初步实现服务器功能-8:57</h2>
<h3 id="普通写法">普通写法</h3>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> http <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;http&#39;</span>)<span class="op">;</span>
<span class="co">//创建服务器实例</span>
<span class="kw">let</span> server <span class="op">=</span> <span class="va">http</span>.<span class="at">createServer</span>()<span class="op">;</span>
<span class="co">//绑定请求事件</span>
<span class="va">server</span>.<span class="at">on</span>(<span class="st">&#39;request&#39;</span><span class="op">,</span>(req<span class="op">,</span>res)<span class="op">=&gt;{</span>
    <span class="va">res</span>.<span class="at">end</span>(<span class="st">&#39;hello&#39;</span>)<span class="op">;</span>
<span class="op">}</span>)
<span class="co">//监听端口</span>
<span class="va">server</span>.<span class="at">listen</span>(<span class="dv">3000</span>)<span class="op">;</span></code></pre></div>
<h3 id="链式写法">链式写法</h3>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> http <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;http&#39;</span>)<span class="op">;</span>
<span class="va">http</span>.<span class="at">createServer</span>((req<span class="op">,</span>res)<span class="op">=&gt;{</span>
    <span class="va">res</span>.<span class="at">end</span>(<span class="st">&#39;ok&#39;</span>)<span class="op">;</span>
<span class="op">}</span>).<span class="at">listen</span>(<span class="dv">3000</span><span class="op">,</span><span class="st">&#39;你的ip地址,这个最好不要写&#39;</span><span class="op">,</span>()<span class="op">=&gt;{</span>
    <span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;running...&#39;</span>)<span class="op">;</span>
<span class="op">}</span>)<span class="op">;</span></code></pre></div>
<h3 id="如何通俗的理解">如何通俗的理解</h3>
<p>你想吃好吃的 --&gt; 你打了一个电话给外卖(请求报文) --&gt; 你必须要告诉外卖员你要吃的那家店地地址，不幸的是，所以首先你要知道门牌号(域名)，不幸的是，这个地址有一堆卖吃的，所以你还得告诉外卖员你要吃的那家的是哪个房间，比如8080房间(端口号) --&gt; 外卖员在电话旁边等着，一有客人的电话就要进行服务(请求报应会触发回调函数)</p>
<h3 id="问题-1">问题</h3>
<ul>
<li>我们平时上网的时候，url不一样，得到的内容不一样</li>
<li>但是我们自己实现的却是不管什么url,得到的内容全是一样的</li>
</ul>
<blockquote>
<p>下面这几个视频主要讲的是如何实现一个类似apache一样的，把文件扔进www就可以访问的功能 ## 03-Node.js-web开发-请求路径分发处理-7:47</p>
</blockquote>
<blockquote>
<p>这块大家经常会搞混，总是觉得文件夹里面有一个文件夹叫abc,就一定可以访问，一定要注意我们的url不管怎么写，其实不代表我们的文件夹里面真的有一个这个文件或文件夹，只是一个标识符而已，所有的url不管怎么样都要进来我们的回调函数里面[重点]</p>
</blockquote>
<ul>
<li>req对象：请求报文
<ul>
<li>req.url</li>
</ul></li>
<li>res对象：响应报文</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> http <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;http&#39;</span>)<span class="op">;</span>
<span class="va">http</span>.<span class="at">createServer</span>((req<span class="op">,</span>res)<span class="op">=&gt;{</span>
    <span class="va">console</span>.<span class="at">log</span>(<span class="va">req</span>.<span class="at">url</span>)<span class="op">;</span>
    <span class="va">res</span>.<span class="at">end</span>(<span class="st">&#39;ok&#39;</span>)<span class="op">;</span>
<span class="op">}</span>).<span class="at">listen</span>(<span class="dv">3000</span>)<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> http <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;http&#39;</span>)<span class="op">;</span>
<span class="va">http</span>.<span class="at">createServer</span>((req<span class="op">,</span>res)<span class="op">=&gt;{</span>
    <span class="co">//req.url可以获取URL中的路径（端口后的部分）</span>
    <span class="co">//req.end(req.url)</span>
    <span class="cf">if</span>(<span class="va">req</span>.<span class="va">url</span>.<span class="at">startsWith</span>(<span class="st">&#39;/index&#39;</span>))<span class="op">{</span>
        <span class="co">//write向客户端响应内容，可以写多次</span>
        <span class="va">res</span>.<span class="at">write</span>(<span class="st">&#39;hello&#39;</span>)<span class="op">;</span>
        <span class="va">res</span>.<span class="at">write</span>(<span class="st">&#39;hi&#39;</span>)<span class="op">;</span>
        <span class="va">res</span>.<span class="at">write</span>(<span class="st">&#39;nihao&#39;</span>)<span class="op">;</span>
        <span class="co">// end方法用来完成响应,只能执行一次</span>
        <span class="va">res</span>.<span class="at">end</span>(<span class="st">&#39;ok&#39;</span>)<span class="op">;</span>
    <span class="op">}</span><span class="cf">else</span> <span class="cf">if</span>(<span class="va">req</span>.<span class="va">url</span>.<span class="at">startsWith</span>(<span class="st">&#39;/about&#39;</span>))<span class="op">{</span>
        <span class="va">res</span>.<span class="at">end</span>(<span class="st">&#39;about&#39;</span>)<span class="op">;</span>
    <span class="op">}</span><span class="cf">else</span><span class="op">{</span>
        <span class="va">res</span>.<span class="at">end</span>(<span class="st">&#39;no content&#39;</span>)<span class="op">;</span>
    <span class="op">}</span>
<span class="op">}</span>).<span class="at">listen</span>(<span class="dv">3000</span>)<span class="op">;</span></code></pre></div>
<h2 id="node.js开发-初步实现静态资源功能-1318">04-Node.js开发-初步实现静态资源功能-13:18</h2>
<ul>
<li>res.writeHead(200,{'Content-Type':'text/plain;charset=utf8'})</li>
</ul>
<h3 id="这样实现的问题">这样实现的问题</h3>
<ul>
<li>如果有一堆的静态资源文件怎么办</li>
<li>静态资源文件的类型是不确定的，比如图片、mp3等</li>
</ul>
<h2 id="node.js开发-优化静态资源功能-1401使用mime">05-Node.js开发-优化静态资源功能-14:01(使用mime)</h2>
<h2 id="node.js开发-静态资源服务器功能模块封装-1401">06-Node.js开发-静态资源服务器功能模块封装-14:01</h2>
<blockquote>
<p>接下来这块咱们是要实现php的<span class="math inline"><em></em><sub><em>G</em></sub><em>E</em><em>T</em>,</span>_POST的功能 ## 07-Node.js开发-get参数处理-12:16</p>
</blockquote>
<h3 id="先思考一下我们如果是浏览器端怎么处理">先思考一下我们如果是浏览器端怎么处理?</h3>
<ul>
<li>location.href</li>
<li>location.hash</li>
<li>location.search --&gt; 如何转换成对象?</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> url <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;url&#39;</span>)<span class="op">;</span>
<span class="kw">let</span> str <span class="op">=</span> <span class="st">&#39;http://www.baidu.com/abc/qqq?flag=123&amp;keyword=java&#39;</span><span class="op">;</span>
<span class="kw">let</span> ret <span class="op">=</span> <span class="va">url</span>.<span class="at">parse</span>(str)<span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(ret)<span class="op">;</span></code></pre></div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> http <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;http&#39;</span>)<span class="op">;</span>
<span class="kw">const</span> path <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;path&#39;</span>)<span class="op">;</span>
<span class="kw">const</span> url <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;url&#39;</span>)<span class="op">;</span>

<span class="va">http</span>.<span class="at">createServer</span>((req<span class="op">,</span>res)<span class="op">=&gt;{</span>
    <span class="kw">let</span> obj <span class="op">=</span> <span class="va">url</span>.<span class="at">parse</span>(<span class="va">req</span>.<span class="at">url</span><span class="op">,</span><span class="kw">true</span>)<span class="op">;</span>
    <span class="va">res</span>.<span class="at">end</span>(<span class="va">obj</span>.<span class="va">query</span>.<span class="at">username</span> <span class="op">+</span> <span class="st">&#39;======&#39;</span> <span class="op">+</span> <span class="va">obj</span>.<span class="va">query</span>.<span class="at">password</span>)<span class="op">;</span>
<span class="op">}</span>).<span class="at">listen</span>(<span class="dv">3000</span><span class="op">,</span>()<span class="op">=&gt;{</span>
    <span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;running...&#39;</span>)<span class="op">;</span>
<span class="op">}</span>)<span class="op">;</span></code></pre></div>
<h2 id="node.js开发-post参数处理-1327">08-Node.js开发-post参数处理-13：27</h2>
<ul>
<li>querystring.parse</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> querystring <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;querystring&#39;</span>)<span class="op">;</span>

<span class="kw">let</span> param <span class="op">=</span> <span class="st">&#39;username=lisi&amp;password=123&#39;</span><span class="op">;</span>
<span class="co">//parse的作用就是把字符串转换成对象</span>
<span class="kw">let</span> obj <span class="op">=</span> <span class="va">querystring</span>.<span class="at">parse</span>(param)<span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(obj)<span class="op">;</span></code></pre></div>
<ul>
<li>querystring.stringify</li>
</ul>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> querystring <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;querystring&#39;</span>)<span class="op">;</span>

<span class="kw">let</span> param <span class="op">=</span> <span class="st">&#39;username=lisi&amp;password=123&#39;</span><span class="op">;</span>
<span class="co">//stringify的作用就是把对象转换成字符串</span>
<span class="kw">let</span> obj1 <span class="op">=</span> <span class="op">{</span>
    <span class="dt">flag</span><span class="op">:</span><span class="st">&#39;123&#39;</span><span class="op">,</span>
    <span class="dt">abc</span><span class="op">:</span>[<span class="st">&#39;hello&#39;</span><span class="op">,</span><span class="st">&#39;hi&#39;</span>]
<span class="op">}</span>
<span class="kw">let</span> str1 <span class="op">=</span> <span class="va">querystring</span>.<span class="at">stringify</span>(obj1)<span class="op">;</span>
<span class="va">console</span>.<span class="at">log</span>(str1)<span class="op">;</span></code></pre></div>
<div class="figure">
<img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-16/45755237.jpg" />

</div>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> querystring <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;querystring&#39;</span>)<span class="op">;</span>
<span class="kw">const</span> http <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;http&#39;</span>)<span class="op">;</span>

<span class="va">http</span>.<span class="at">createServer</span>((req<span class="op">,</span>res)<span class="op">=&gt;{</span>
    <span class="cf">if</span>(<span class="va">req</span>.<span class="va">url</span>.<span class="at">startsWith</span>(<span class="st">&#39;/login&#39;</span>))<span class="op">{</span>
        <span class="kw">let</span> pdata <span class="op">=</span> <span class="st">&#39;&#39;</span><span class="op">;</span>
        <span class="va">req</span>.<span class="at">on</span>(<span class="st">&#39;data&#39;</span><span class="op">,</span>(chunk)<span class="op">=&gt;{</span>
            pdata<span class="op">+=</span>chunk<span class="op">;</span>
        <span class="op">}</span>)<span class="op">;</span>

        <span class="va">req</span>.<span class="at">on</span>(<span class="st">&#39;end&#39;</span><span class="op">,</span>()<span class="op">=&gt;{</span>
            <span class="va">console</span>.<span class="at">log</span>(pdata)<span class="op">;</span>
            <span class="kw">let</span> obj <span class="op">=</span> <span class="va">querystring</span>.<span class="at">parse</span>(pdata)<span class="op">;</span>
            <span class="va">res</span>.<span class="at">end</span>(<span class="va">obj</span>.<span class="at">username</span><span class="op">+</span><span class="st">&#39;---&#39;</span><span class="op">+</span><span class="va">obj</span>.<span class="at">password</span>)<span class="op">;</span>
        <span class="op">}</span>)
    <span class="op">}</span>
<span class="op">}</span>).<span class="at">listen</span>(<span class="dv">3000</span><span class="op">,</span>()<span class="op">=&gt;{</span>
    <span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;running...&#39;</span>)<span class="op">;</span>
<span class="op">}</span>)</code></pre></div>
<h3 id="补充-post数据提交的形式的区别">补充 post数据提交的形式的区别</h3>
<ul>
<li>http://blog.csdn.net/ye1992/article/details/49998511</li>
</ul>
<h2 id="node.js-web开发-登陆验证案例-1322">09-Node.js-web开发-登陆验证案例-13:22</h2>
<h2 id="node.js-web开发-初步实现动态网站">10-Node.js-web开发-初步实现动态网站</h2>
<h3 id="动态网站的本质">动态网站的本质</h3>
<p>根据不同的请求路径和参数的传递来得到不同的内容，并且我们的浏览器端的内容是动态生成的，并不是像静态资源一样是提前写好的</p>
<h2 id="node.js-web开发-后台模板引擎基本使用-1259">11-Node.js-web开发-后台模板引擎基本使用-12:59</h2>
<h2 id="node.js-web开发-使用模板引擎查询成绩案例">12-Node.js-web开发-使用模板引擎查询成绩案例</h2>
<h2 id="node.js-web开发-express-初识web框架-719">13-Node.js-web开发-Express-初识web框架-7:19</h2>
<h2 id="node.js-web开发-express-初步实现服务器功能-900">14-Node.js-web开发-Express-初步实现服务器功能-9:00</h2>
<h2 id="node.js-web开发-express-托管静态资源-1234">15-Node.js-web开发-Express-托管静态资源-12:34</h2>
<h2 id="node.js-web开发-express-路由处理-1120">16-Node.js-web开发-Express-路由处理-11:20</h2>
<h1 id="参考资料">参考资料</h1>
<ul>
<li>《mysql必知必会》</li>
<li>《图解http协议》</li>
<li>http://island205.github.io/HelloSea.js/index.html</li>
</ul>
<p><img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-16/81575811.jpg" /> <img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-16/60672638.jpg" /> <img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-16/94288711.jpg" /> <img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-16/20876511.jpg" /> <img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-16/5960758.jpg" /> <img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-16/3765828.jpg" /> <img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-16/73427594.jpg" /> <img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-16/64644425.jpg" /> <img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-16/748435.jpg" /> <img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-16/56447944.jpg" /> <img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-16/11657382.jpg" /> <img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-16/1545306.jpg" /> <img src="http://7fvanf.com1.z0.glb.clouddn.com/17-8-16/33598977.jpg" /></p>
        </div>
      </div>
    </div>
    
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="https://maxcdn.bootstrapcdn.com/js/ie10-viewport-bug-workaround.js"></script>
    <script>
        //document.getElementById('sidebar').getElementsByTagName('ul')[0].className += "nav nav-sidebar";
        
        /* ajust the height when click the toc
           the code is from https://github.com/twbs/bootstrap/issues/1768
        */
        var shiftWindow = function() { scrollBy(0, -50) };
        window.addEventListener("hashchange", shiftWindow);
        function load() { if (window.location.hash) shiftWindow(); }
        
        /*add Bootstrap styles to tables*/
        var tables = document.getElementsByTagName("table");
        for(var i = 0; i < tables.length; ++i){
            tables[i].className += "table table-bordered table-hover";
        }
    </script>
  </body>
</html>
